分享个极好的无刷新二级联动下拉列表,同样适用与firefox.doc

可能极好的又会带来很多的非议,但是我认为这确实很好,我看了大约20个无刷新的连动下拉列表,他们在Firefox下面就一团糟.为了这个我差不多搞了两天,就是如果提交窗体后如何保持第二个列表框的值,因为通过js 给下拉框添加条目那么他的状态是不会被保存的测试平台:ie6,firefox功能:二级无刷新连动特点:跨浏览器;提交窗体取第二下拉框的值;数据来源于数据库;以XMLhttp来发送请求,实现无刷新请求:如果您能够找到更好的方法请告诉我,非常感谢,您的批评和建议对我是莫大的鼓励webform1.ASPx:WebForm1javascript/intellisense/ie5 /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，第三个参数最好为truexmlhttp.open(get,weburl,true); / alert(xmlhttp.responseText);/如果已经成功的返回了数据xmlhttp.()if(xmlhttp.readyState=4)/4代表成功返回数据 var result = xmlhttp.responseText;/得到服务器返回的数据/先清空dListChild的所有下拉项document.getElementById(dListChild).length = 0;/给dListChild加个全部型号的,注意是Option不是optiondocument.getElementById(dListChild).options.add(new Option(全部型号,0);if(result!=)/如果返回的数据不是空 /把收到的字符串按照，分割成数组 var allArray = result.split(,);/循环这个数组，注意是从1开始，因为收到的字符串第一个字符是，号，所以分割后第一个数组为空 for(var i=1;iallArray.length;i+) /在把这个字符串按照分割成数组 var thisArray = allArray.split();/为dListChild添加条目document.getElementById(dListChild).options.add(new Option(thisArray1.toString(),thisArray0.toString(); /发送数据，请注意顺序和参数，参数一定为null或者xmlhttp.send(null); 摩托罗拉诺基亚 后台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.Pageprotected 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.QueryStringparent_id; string str1 = dListParent.SelectedValue; Response.Write(str1); /如果str加个字符串!=原来的字符串则说明触发过dListParent的onchange事件 if(str+abc)!=abc) /绑定 dListChild控件BindChild(str);/把传来的父DropDownList的value做为参数 elseBindParent(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.AppSettingsConnString.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(dr1.ToString(),dr0.ToString();/也可以这样/dListParent.Items.Add(new ListItem(drphone_text.ToString(),drphone_value.ToString(); dListParent.Items0.Selected = true; /添加下面这话的意思是当点提交按钮提交窗体的时候第二个dListChild的状态能够得到保存 dListChild.SelectedValue = Request.FormdListChild; dr.Close(); conn.Close(); protected void BindChild(string str) /通过js给包括dropdownlist任何控件添加的内容不会被保存状态 /把参数转化成int int i = Convert.ToInt32(str); /定义个字符串用保存从数据库返回的数据 string result = ; /先清空输出的东西 Response.Clear(); string connStr = ConfigurationSettings.AppSettingsConnString.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 += ,+dr0.ToString() + + dr1.ToString();/dListChild.Items.Add(new ListItem(dr1.ToString(),dr0.ToString(); /把从数据库得到的信息输出到客户端 Response.Write(result); /输出完成关闭Response,以免造成不必要的输出 Response.Flush(); Response.Close(); dr.Close(); conn.Close();#region Web 窗体设计器生成的代码override protected void OnInit(EventArgs e) / / CODEGEN: 该调用是 Asp.Net Web 窗体设计器所必需的。 / InitializeComponent(); base.OnInit(e);/ / 设计器支持所需的方法 - 不要使用代码编辑器修改/ 此方法的内容。/ private void InitializeComponent() this.Bu