xmlhttp实现的三级连动下拉菜单（无刷新）经测试，有bug。无法三级联动，只能两级连动。

 

看了半天js代码看不懂。我就用拿开主义了，反正拿来就能用。

 

只能点击第一个联动第2个，点击第2个，联动第三个。

html

using  System; using  System.Collections; using  System.ComponentModel; using  System.Data; using  System.Drawing; using  System.Web; using  System.Web.SessionState; using  System.Web.UI; using  System.Web.UI.WebControls; using  System.Web.UI.HtmlControls; using  System.Data.SqlClient; namespace  WebApplication1 ... {    /**//// <summary>    /// Summary description for WebForm1.    /// </summary>    public partial class WebForm1 : System.Web.UI.Page    ...{                public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];            GetDataSet#region GetDataSet        public static DataSet GetDataSet(string sql)        ...{            SqlDataAdapter    sda =new SqlDataAdapter(sql,ConnectionString);            DataSet ds=new DataSet();            sda.Fill(ds);            return ds;        }        #endregion        property#region property        private string provinceid        ...{            get            ...{                if(ViewState["provinceid"]!=null && ViewState["provinceid"].ToString()!="")                ...{                    return ViewState["provinceid"].ToString();                }                else                ...{                    if(Request["provinceid"]!=null && Request["provinceid"].ToString()!="")                    ...{                        return Request["provinceid"];                    }                    else                    ...{                        return "";                    }                }            }            set            ...{                ViewState["provinceid"]=value;            }        }        private string cityid        ...{            get            ...{                if(ViewState["cityid"]!=null && ViewState["cityid"].ToString()!="")                ...{                    return ViewState["cityid"].ToString();                }                else                ...{                    if(Request["cityid"]!=null && Request["cityid"].ToString()!="")                    ...{                        return Request["cityid"];                    }                    else                    ...{                        return "";                    }                }            }            set            ...{                ViewState["provinceid"]=value;            }        }        #endregion        Page_Load#region Page_Load        protected void Page_Load(object sender, System.EventArgs e)        ...{            if(!this.IsPostBack)　　        ...{　　　　        this.down1_bind();                this.DropDownList1.Attributes.Add("onchange","XmlPost2(this);");                this.DropDownList2.Attributes.Add("onchange","XmlPost3(this);");           　　        }　　        if(provinceid != "")　　        ...{　　　　        this.down2_bind(provinceid);　　        }            if(cityid != "")　　        ...{　　　　        this.down3_bind(cityid);　　        }        }                #endregion        down2_bind#region down2_bind        private void down2_bind(string id)        ...{　　        string mystr = "";　　        string sql = "select cityID,city from city where father = '" + id + "'";　　        DataSet ds = GetDataSet(sql);　　        if(ds.Tables[0].Rows.Count != 0)　　        ...{　　　　        for(int i=0;i<ds.Tables[0].Rows.Count;i++)　　　　        ...{　　　　　　        mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();　　　　        }　　　　        mystr = mystr.Substring(1);　　        }　　        this.Response.Write(mystr);　　        this.Response.End();        }        #endregion        down3_bind#region down3_bind        private void down3_bind(string id)        ...{　　        string mystr = "";　　        string sql = "select areaID,area from area where father = '" + id + "'";　　        DataSet ds = GetDataSet(sql);　　        if(ds.Tables[0].Rows.Count != 0)　　        ...{　　　　        for(int i=0;i<ds.Tables[0].Rows.Count;i++)　　　　        ...{　　　　　　        mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();　　　　        }　　　　        mystr = mystr.Substring(1);　　        }　　        this.Response.Write(mystr);　　        this.Response.End();        }        #endregion                down1_bind#region down1_bind        private void down1_bind()        ...{　　        string sql = "select provinceID,province from province";　　        DataSet ds = GetDataSet(sql);　　        this.DropDownList1.DataSource = ds;　　        this.DropDownList1.DataValueField = "provinceID";　　        this.DropDownList1.DataTextField = "province";　　        this.DropDownList1.DataBind();　　                }        #endregion        Web Form Designer generated code#region Web Form Designer generated code        override protected void OnInit(EventArgs e)        ...{            //            // CODEGEN: This call is required by the ASP.NET Web Form Designer.            //            InitializeComponent();            base.OnInit(e);        }        /**//// <summary>        /// Required method for Designer support - do not modify        /// the contents of this method with the code editor.        /// </summary>        private void InitializeComponent()        ...{            }        #endregion    }}

 

cs

<% ... @ Page language="c#" Inherits="WebApplication1.WebForm1" CodeFile="WebForm1.aspx.cs"  %> < HTML >      < HEAD >          < title > XmlHttp实现无刷新三联动下拉框 </ title >          < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >          < meta  name ="CODE_LANGUAGE"  Content ="C#" >          < meta  name ="vs_defaultClientScript"  content ="JavaScript" >          < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >      </ HEAD >      < body >          < form  id ="Form1"  method ="post"  runat ="server" >              < INPUT  style ="Z-INDEX: 102; LEFT: 448px; WIDTH: 56px; POSITION: absolute; TOP: 8px; HEIGHT: 24px"                 onclick ="getData();"  type ="button"  value ="test" >              < asp:TextBox  id ="TextBox1"  style ="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 8px"  runat ="server"                 Width ="424px" ></ asp:TextBox >              < asp:DropDownList  id ="DropDownList2"  runat ="server"  style ="Z-INDEX: 103; LEFT: 176px; POSITION: absolute; TOP: 48px" >                  < asp:ListItem > 请选择 </ asp:ListItem >              </ asp:DropDownList >              < asp:DropDownList  id ="DropDownList1"  runat ="server"  style ="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 48px" >                  < asp:ListItem > 请选择 </ asp:ListItem >              </ asp:DropDownList >              < asp:DropDownList  id ="DropDownList3"  runat ="server"  style ="Z-INDEX: 105; LEFT: 296px; POSITION: absolute; TOP: 48px" >                  < asp:ListItem > 请选择 </ asp:ListItem >              </ asp:DropDownList >              < SCRIPT  LANGUAGE ="JavaScript" > ...             <!--                //以XML求取DropDownList2的数据                function XmlPost2(obj)                ...{　　                var svalue = obj.value;　　                var webFileUrl = "?provinceid=" + svalue;　　                var result = "";　　                var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");　　                xmlHttp.open("POST", webFileUrl, false);　　                xmlHttp.send("");　　                result = xmlHttp.responseText;                　　　　                if(result != "")　　                ...{　　　　                document.all("DropDownList2").length=0;　　　　                var piArray = result.split(",");　　　　                for(var i=0;i<piArray.length;i++)　　　　                ...{　　　　　　                var ary1 = piArray[i].toString().split("|");　　　　　　                document.all("DropDownList2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));　　　　                }　　                }　　                else　　                ...{　　　　                alert(result);　　                }                }                //以XML求取DropDownList3的数据                function XmlPost3(obj)                ...{　　                var svalue = obj.value;　　                var webFileUrl = "?cityid=" + svalue;　　                var result = "";　　                var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");　　                xmlHttp.open("POST", webFileUrl, false);　　                xmlHttp.send("");　　                result = xmlHttp.responseText;                　　　　                if(result != "")　　                ...{　　　　                document.all("DropDownList3").length=0;　　　　                var piArray = result.split(",");　　　　                for(var i=0;i<piArray.length;i++)　　　　                ...{　　　　　　                var ary1 = piArray[i].toString().split("|");　　　　　　                document.all("DropDownList3").options.add(new Option(ary1[1].toString(),ary1[0].toString()));　　　　                }　　                }　　                else　　                ...{　　　　                alert(result);　　                }                }                function getData()                ...{                    var province=document.getElementById("DropDownList1");                    var pindex = province.selectedIndex;                    var pValue = province.options[pindex].value;                    var pText  = province.options[pindex].text;                                        var city=document.getElementById("DropDownList2");                    var cindex = city.selectedIndex;                    var cValue = city.options[cindex].value;                    var cText  = city.options[cindex].text;                                        var area=document.getElementById("DropDownList3");                    var aindex = area.selectedIndex;                    var aValue = area.options[aindex].value;                    var aText  = area.options[aindex].text;                                        var txt=document.getElementById("TextBox1");                                                    document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;                }            //-->             </ SCRIPT >          </ form >      </ body > </ HTML >