一个无刷新的二级联动下拉框

1 html代码：

< HTML >
     < HEAD >
         < title > WebForm </ title >
         < meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >
         < meta  content ="C#"  name ="CODE_LANGUAGE" >
         < meta  content ="JavaScript"  name ="vs_defaultClientScript" >
         < meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >
         < script  language ="javascript" > ...
         //jb函数会根据不同的浏览器初始化个xmlhttp对象
         function jb()
         ...{
            var A=null; 
               try 
               ...{ 
                   A=new ActiveXObject("Msxml2.XMLHTTP"); 
                } 
            catch(e)
            ...{ 
                  try 
                   ...{ 
                      A=new ActiveXObject("Microsoft.XMLHTTP"); 
                   }
             catch(oc)
            ...{ 
                     A=null 
                   } 
              } 
           if ( !A && typeof XMLHttpRequest != "undefined" ) 
            ...{ 
               A=new XMLHttpRequest() 
             } 
           return A 
         }
         
         //下面Go函数是父列表框改变的时候调用，参数是选择的条目
         function Go(obj)
         ...{
            //得到选择框的下拉列表的value
           var svalue = obj.value;
            //定义要处理数据的页面
            var weburl = "WebForm.aspx?parent_id="+svalue;
            //初始化个xmlhttp对象
            var xmlhttp = jb();
            //提交数据，第一个参数最好为get，第三个参数最好为true
            xmlhttp.open("get",weburl,true);
           // alert(xmlhttp.responseText);
            //如果已经成功的返回了数据
            xmlhttp.onreadystatechange=function()
            ...{
              if(xmlhttp.readyState==4)//4代表成功返回数据
               ...{
                  var result = xmlhttp.responseText;//得到服务器返回的数据
                  //先清空dListChild的所有下拉项
                 document.getElementById("DropDownList2").length = 0;
                  //给dListChild加个全部型号的,注意是Option不是option
                  document.getElementById("DropDownList2").options.add(new Option("-城市-","0"));
                  if(result!="")//如果返回的数据不是空
                  ...{
                     //把收到的字符串按照，分割成数组
                     var allArray = result.split(",");
                    //循环这个数组，注意是从1开始，因为收到的字符串第一个字符是，号，所以分割后第一个数组为空
                     for(var i=1;i<allArray.length;i++)
                     ...{
                        //在把这个字符串按照|分割成数组
                       var thisArray = allArray[i].split("|");
                        //为dListChild添加条目
                        document.getElementById("DropDownList2").options.add(new Option(thisArray[1].toString(),thisArray[0].toString()));
                     }
                  }
               }
            }
            //发送数据，请注意顺序和参数，参数一定为null或者""
            xmlhttp.send(null);
         }
         </ script >
     </ HEAD >
     < body  MS_POSITIONING ="GridLayout" >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < asp:dropdownlist  id ="DropDownList1"  style ="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px"
                runat ="server"  onchange ="Go(this)"  width ="90px" >
                 < asp:listitem  value ="0" > -省份- </ asp:listitem >
                 < asp:listitem  value ="1" > 山东 </ asp:listitem >
                 < asp:listitem  value ="2" > 江苏 </ asp:listitem >
             </ asp:dropdownlist >< asp:dropdownlist  id ="DropDownList2"  style ="Z-INDEX: 102; LEFT: 112px; POSITION: absolute; TOP: 8px"
                runat ="server"  width ="110px" ></ asp:dropdownlist >< asp:button  id ="Button1"  style ="Z-INDEX: 103; LEFT: 240px; POSITION: absolute; TOP: 8px"  runat ="server"
                text ="Button" ></ asp:button >
         </ form >
     </ body >

2 cs代码

 

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;

namespace  WebApplication3
... {
    /**//// <summary>
    /// WebForm1 的摘要说明。
    /// </summary>
    public class WebForm : System.Web.UI.Page
    ...{
        protected System.Web.UI.WebControls.DropDownList DropDownList1;
        protected System.Web.UI.WebControls.DropDownList DropDownList2;
        protected System.Web.UI.WebControls.Button Button1;
    
        private void Page_Load(object sender, System.EventArgs e)
        ...{
            // 在此处放置用户代码以初始化页面
            BindDrop();
        }

        private void BindDrop()
        ...{ 
            string str = Request.QueryString["parent_id"]; 
            string privince = DropDownList1.SelectedValue; 
            //如果str!=null则说明触发过DropDownList1的onchange事件 
            if(str != null) 
            ...{ 
                BindChild(str);
            } 
            else 
            ...{ 
                BindParent(privince);
            } 
        }
        

        protected void BindParent(string str) 
        ...{ 
            int i = Convert.ToInt32(str); 
            DropDownList2.Items.Clear(); 
            DropDownList2.Items.Add(new ListItem("-城市-","0")); 
            
            if (i == 0)
            ...{
                //添加下面这话的意思是当点提交按钮提交窗体的时候第一个DropDownList1的状态能够得到保存 
                DropDownList1.Items[0].Selected = true; 
            }
            else if (i == 1) 
            ...{ 
                DropDownList2.Items.Add(new ListItem("济南","1")); 
                DropDownList2.Items.Add(new ListItem("青岛","2")); 
                DropDownList2.Items.Add(new ListItem("潍坊","3")); 
                DropDownList1.Items[1].Selected = true; 
            }
            else if (i == 2) 
            ...{ 
                DropDownList2.Items.Add(new ListItem("南京","1")); 
                DropDownList2.Items.Add(new ListItem("苏州","2")); 
                DropDownList2.Items.Add(new ListItem("扬州","3")); 
                DropDownList1.Items[2].Selected = true; } 
            
            //添加下面这话的意思是当点提交按钮提交窗体的时候第二个DropDownList2的状态能够得到保存 
            DropDownList2.SelectedValue = Request.Form["DropDownList2"];
        } 
        

        protected void BindChild(string str) 
        ...{ 
            //通过js给包括dropdownlist任何控件添加的内容不会被保存状态 
            //把参数转化成int
            int i = Convert.ToInt32(str); 
            if (i == 1) 
            ...{ 
                //定义个字符串用保存从数据库返回的数据 
                //注意格式，一定要准确，不能写反
                string result = ","+"1"+"|"+"济南"+","+"2"+"|"+"青岛"+","+"3"+"|"+"潍坊"; 
                
                //先清空输出的东西 
                Response.Clear(); 
                
                //把从数据库得到的信息输出到客户端 
                Response.Write(result); 
                
                //输出完成关闭Response,以免造成不必要的输出 
                Response.Flush();
                Response.Close(); 
            } 
            else if (i == 2) 
            ...{ 
                //定义个字符串用保存从数据库返回的数据 
                string result = ","+"1"+"|"+"南京" + ","+"2"+"|"+"苏州" +","+"3"+"|"+"扬州";
                
                //先清空输出的东西 
                Response.Clear(); 
                
                //把从数据库得到的信息输出到客户端 
                Response.Write(result); 
                
                //输出完成关闭Response,以免造成不必要的输出 
                Response.Flush(); 
                Response.Close(); 
            } 
        }


        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        ...{
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        ...{    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }
}

附：小山博客的Ajax实现无刷新三联动下拉框 http://www.cnblogs.com/singlepine/archive/2005/10/19/257954.html