XmlHttp实现无刷新三联动下拉框

 

1.html代码

< 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  MS_POSITIONING ="GridLayout" >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < INPUT  style ="Z-INDEX: 102; LEFT: 448px; WIDTH: 56px; POSITION: absolute; TOP: 80px; HEIGHT: 24px"
                onclick ="getData();"  type ="button"  value ="保存"  id ="Button1"  name ="Button1"  runat ="server" >
             < asp:TextBox  id ="TextBox1"  style ="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 80px"  runat ="server"
                Width ="424px" ></ asp:TextBox >
             < asp:DropDownList  id ="DropDownList2"  runat ="server"  style ="Z-INDEX: 103; LEFT: 176px; POSITION: absolute; TOP: 120px" ></ asp:DropDownList >
             < asp:DropDownList  id ="DropDownList1"  runat ="server"  style ="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 120px" ></ asp:DropDownList >
             < asp:DropDownList  id ="DropDownList3"  runat ="server"  style ="Z-INDEX: 105; LEFT: 296px; POSITION: absolute; TOP: 120px" ></ asp:DropDownList >< INPUT  style ="Z-INDEX: 106; LEFT: 8px; WIDTH: 160px; POSITION: absolute; TOP: 176px; HEIGHT: 22px"
                type ="hidden"  size ="21"  id ="hidprovince"  runat ="server" >< INPUT  style ="Z-INDEX: 107; LEFT: 184px; POSITION: absolute; TOP: 176px"  type ="hidden"
                id ="hidcity"  runat ="server" >< INPUT  style ="Z-INDEX: 108; LEFT: 360px; POSITION: absolute; TOP: 176px"  type ="hidden"
                id ="hidarea"  runat ="server" >
             < SCRIPT  LANGUAGE ="JavaScript" >
            <!--
                //以XML求取DropDownList2的数据
                function XmlPost2(obj)
                {
　　                var svalue = obj.value;
　　                var webFileUrl = "?povinceid=" + 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;
                    document.Form1.hidprovince.value=pValue;
                    document.Form1.hidcity.value=cValue;
                    document.Form1.hidarea.value=aValue;
                }
            //-->
             </ SCRIPT >
         </ form >
     </ body >
</ HTML >

2.cs代码

public   class  WebForm1 : System.Web.UI.Page
     {
        protected System.Web.UI.WebControls.DropDownList DropDownList1;
        protected System.Web.UI.WebControls.DropDownList DropDownList2;
        protected System.Web.UI.WebControls.DropDownList DropDownList3;
        protected System.Web.UI.WebControls.TextBox TextBox1;
    
        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["cityid"]=value;
            }
        }
        #endregion

        Page_Load#region Page_Load
        private 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()
        {    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }

3.数据库area1.rar
4.Ajax实现无刷新三联动下拉框

5.源代码下载XmlHttpselect.rar