jquery+ajax+asp.net 三級聯動

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

DEMO

XmlDocument xmlDoc = new XmlDocument();
        void Datea()
        {
            StringBuilder sb = new StringBuilder();
            xmlDoc.Load(Server.MapPath("ChinaArea.xml"));
            XmlNodeList nodelist = xmlDoc.SelectNodes("area/province[@provinceID]");
            sb.Append("{Sheng:[");
            foreach (XmlNode myNode in nodelist)
            {
                string name = myNode.Attributes["province"].Value;
                sb.Append("{");
                sb.AppendFormat("Name:\"{0}\",",name);
                sb.AppendFormat("Value:{0}", myNode.Attributes["provinceID"].Value);
                sb.Append("},");
            }
            sb.Remove(sb.Length - 1, 1);
            sb.Append("]}");

            Response.Write(sb.ToString());
            Response.End();
        }
        void Sheng(string name, string pic, string str)
        {
            StringBuilder sb = new StringBuilder();
            xmlDoc.Load(Server.MapPath("ChinaArea.xml"));
            sb.Append("{" + name + ":[");
            if (str == "City")
            {
                XmlNodeList nodelist = xmlDoc.SelectNodes("area/province[@provinceID=" + pic + "]/" + str + "");
                foreach (XmlNode obj in nodelist)
                {
                    string dd = obj.Attributes["City"].Value;
                    sb.Append("{");
                    sb.AppendFormat("Name:\"{0}\",", dd);
                    sb.AppendFormat("Value:{0}", obj.Attributes["CityID"].Value);
                    sb.Append("},");
                }
            }
            else if (str == "Piecearea")
            {
                XmlNodeList nodelist = xmlDoc.SelectNodes("area/province/City[@CityID=" + pic + "]/" + str + "");
                foreach (XmlNode obj in nodelist)
                {
                    string dd = obj.Attributes["Piecearea"].Value;
                    sb.Append("{");
                    sb.AppendFormat("Name:\"{0}\",", dd);
                    sb.AppendFormat("Value:{0}", obj.Attributes["PieceareaID"].Value);
                    sb.Append("},");
                }
            }
            sb.Remove(sb.Length - 1, 1);
            sb.Append("]}");
            Response.Write(sb.ToString());
            Response.End();

}

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無標題頁</title>
    <script src="jquery.js"></script>
    <script>
    $(function(){
          $("#Button1").click(function(){
                $.ajax({
                  data:{Full:"fu"},
                  url: "/test.aspx",
                  type: "POST",
                  dataType:'json',
                  cache: false,
                  success:CallBack,
                  error:function(er){
                  BackErr(er);}
                });
          });
          $("#Select1").change(function(){
                 $.ajax({
                  data:{Name:"Shi",PieceareaID:$("#Select1").val(),ct:"City"},
                  url: "/test.aspx",
                  type: "POST",
                  dataType:'json',
                  cache: false,
                  success:CallBacks,
                  error:function(er){
                  BackErr(er);}
                });
          });
          $("#Select2").change(function(){
                 $.ajax({
                  data:{Name:"X",PieceareaID:$("#Select2").val(),ct:"Piecearea"},
                  url: "/test.aspx",
                  type: "POST",
                  dataType:'json',
                  cache: false,
                  success:CallBackx,
                  error:function(er){
                  BackErr(er);}
                });
          });
    });
function CallBack(r)
    {
        var jos=eval(r);
        $.each(jos.Sheng,function(i)
        {
            $("#Select1").append("<option value=\""+jos.Sheng[i].Value+"\">"+jos.Sheng[i].Name+"</option>");
        });
    }
    function CallBacks(r)
    {
     $("#Select2").removeAttr("disabled");
     $("#Select2").html("<option value=\"0\">--請選擇--</option>");

      var jos=eval(r);
      $.each(jos.Shi,function(i)
        {
            $("#Select2").append("<option value=\""+jos.Shi[i].Value+"\">"+jos.Shi[i].Name+"</option>");
        });
    }
     function CallBackx(r)
    {
      $("#Select2").removeAttr("disabled");
     $("#Select3").html("<option value=\"0\">--請選擇--</option>");

      var jos=eval(r);
      $.each(jos.X,function(i)
        {
            $("#Select3").append("<option value=\""+jos.X[i].Value+"\">"+jos.X[i].Name+"</option>");
        });
    }
    function BackErr(r)
    {
        alert("沒有子資料");
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input id="Button1" type="button" value="擷取資料"/>
   省： <select id="Select1">
        <option value="0">--請選擇--</option>
    </select>
    市： <select id="Select2" disabled=disabled>
        <option value="0">--請選擇--</option>
    </select>
    縣：<select id="Select3" disabled=disabled>
        <option value="0">--請選擇--</option>
    </select>
   <ul id="list"></ul>
    </div>
    </form>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More