极好的无刷新二级联动下拉列表

  测试平台:ie6,firefox
  功能:二级无刷新连动
  特点:跨浏览器;提交窗体取第二下拉框的值;数据来源于数据库;以xmlhttp来发送请求,实现无刷新
  请求:如果您能够找到更好的方法请告诉我,非常感谢,您的批评和建议对我是莫大的鼓励

webform1.aspx:

<% @ Page language = " c# "  Codebehind = " WebForm1.aspx.cs "  AutoEventWireup = " false "  Inherits = " drop.WebForm1 "   %>  
   DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN "   >  
   < HTML >  
    < HEAD >  
    < title > WebForm1 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 " >  
    < 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 = "webform1.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("dListChild").length = 0; 
   //给dListChild加个全部型号的,注意是Option不是option 
   document.getElementById("dListChild").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("dListChild").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 onchange = " Go(this) "  id = " dListParent "  style = " Z-INDEX: 101; LEFT: 248px; POSITION: absolute; TOP: 40px "  
   runat = " server " >  
    < asp:ListItem Value = " 100 " > 摩托罗拉 asp:ListItem >  
    < asp:ListItem Value = " 101 " > 诺基亚 asp:ListItem >  
    asp:DropDownList >  
    < asp:DropDownList id = " dListChild "  style = " Z-INDEX: 102; LEFT: 248px; POSITION: absolute; TOP: 104px "  
   runat = " server " > asp:DropDownList >  
    < asp:Button id = " Button1 "  style = " Z-INDEX: 103; LEFT: 256px; POSITION: absolute; TOP: 176px "  runat = " server "  
   Text = " Button " > asp:Button >  
    form >  
    body >  
   HTML >  

 后台webform1.aspx.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; 
   using  System.Configuration; 
   using  System.Data.SqlClient; 
   
   namespace  drop 
   ... { 
   /**//// 

 
   /// WebForm1 的摘要说明。 
   /// 

 
   public class WebForm1 : System.Web.UI.Page 
   ...{   [转自:51item.net]  
   protected System.Web.UI.WebControls.DropDownList dListParent; 
   protected System.Web.UI.WebControls.Button Button1; 
   protected System.Web.UI.WebControls.DropDownList dListChild; 
   
   private void Page_Load(object sender, System.EventArgs e) 
   ...{ 
   // 在此处放置用户代码以初始化页面 
   //if(!IsPostBack) 
   //{ 
   BindDrop();//如果不是提交回来就绑定列表框 
   //} 
   } 
   
   protected void BindDrop() 
   ...{ 
   //首先我想父dropdownlist也绑定数据库,后面想没必要 
   //if(!IsPostBack) 
   //{ 
   //绑定父dListParent 
   // BindParent(); 
   //} 
   //获得传递过来的parent_id值,如果是第一次请求他为null 
   string str = Request.QueryString["parent_id"]; 
   string str1 = dListParent.SelectedValue;; 
   Response.Write(str1); 
   //如果str加个字符串!=原来的字符串则说明触发过dListParent的onchange事件 
   if((str+"abc")!="abc") 
   ...{ 
   //绑定 dListChild控件 
   BindChild(str);//把传来的父DropDownList的value做为参数 
   } 
   else 
   BindParent(str1); 
   } 
   
   
   protected void BindParent(string str) 
   ...{ 
   //如果是第一次请求或者是刷新这个页面则根据dListParent的值来选择 
   //把参数转化成int 
   int i = Convert.ToInt32(str); 
   dListChild.Items.Clear(); 
   dListChild.Items.Add(new ListItem("全部型号","0")); 
   //得到数据库连接字符串 
   string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString(); 
   //初始化个conn对象 
   SqlConnection conn = new SqlConnection(connStr); 
   //数据库语句 
   string commStr = string.Format("select type_value,type_text from phone_type where parent_id={0}",i); 
   //建立数据库命令对象 
   SqlCommand comm = new SqlCommand(commStr,conn); 
   //打开数据库 
   conn.Open(); 
   //执行命令 
   SqlDataReader dr = comm.ExecuteReader(); 
   //循环dr，给dListParent添加条目 
   while(dr.Read()) 
   ...{ 
   dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString())); 
   //也可以这样 
   //dListParent.Items.Add(new ListItem(dr["phone_text"].ToString(),dr["phone_value"].ToString())); 
   } 
   dListParent.Items[0].Selected = true; 
   //添加下面这话的意思是当点提交按钮提交窗体的时候第二个dListChild的状态能够得到保存 
   dListChild.SelectedValue = Request.Form["dListChild"]; 
   dr.Close(); 
   conn.Close(); 
   } 
   
   
   protected void BindChild(string str) 
   ...{ 
   //通过js给包括dropdownlist任何控件添加的内容不会被保存状态 
   //把参数转化成int 
   int i = Convert.ToInt32(str); 
   //定义个字符串用保存从数据库返回的数据 
   string result = ""; 
   //先清空输出的东西 
   Response.Clear(); 
   string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString(); 
   SqlConnection conn = new SqlConnection(connStr); 
   SqlCommand comm = conn.CreateCommand(); 
   string commStr = string.Format("select type_value,type_text from phone_type where parent_id = {0}",i); 
   comm.CommandText = commStr; 
   conn.Open(); 
   SqlDataReader dr = comm.ExecuteReader(); 
   while(dr.Read()) 
   ...{ 
   result += ","+dr[0].ToString() +"|" + dr[1].ToString(); 
   //dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString())); 
   } 
   //把从数据库得到的信息输出到客户端 
   Response.Write(result); 
   //输出完成关闭Response,以免造成不必要的输出 
   Response.Flush(); 
   Response.Close(); 
   dr.Close(); 
   conn.Close(); 
   } 
   Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码 
   override protected void OnInit(EventArgs e) 
   ...{ 
   // 
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。 
   // 
   InitializeComponent(); 
   base.OnInit(e); 
   } 
   
   /**//// 

 
   /// 设计器支持所需的方法 - 不要使用代码编辑器修改 
   /// 此方法的内容。 
   /// 

 
   private void InitializeComponent() 
   ...{ 
   this.Button1.Click += new System.EventHandler(this.Button1_Click); 
   this.Load += new System.EventHandler(this.Page_Load); 
   
   } 
   #endregion 
   
   private void Button1_Click(object sender, System.EventArgs e) 
   ...{ 
   Response.Write(Request.Form["dListChild"].ToString()); 
   } 
   } 
  }  

  数据表:
  主键id parent_id(int) type_value(int) type_text(varchar)
  int递增 父下拉框的value值 下拉框的value 下拉框的text