适用与firefox ASP.NET无刷新二级联动下拉列表

　　可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约20个无刷新的连动下拉列表,他们在firefox下面就一团糟.为了这个我差不多搞了两天,就是如果提交窗体后如何保持第二个列表框的值,因为通过js 给下拉框添加条目那么他的状态是不会被保存的测试平台: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>

　　//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>

　　<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

　　{

　　/// <summary>

　　/// WebForm1 的摘要说明。

　　/// </summary>

　　public class WebForm1 : System.Web.UI.Page

　　{

　　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();

　　}

　　#region Web 窗体设计器生成的代码

　　override protected void OnInit(EventArgs e)

　　{

　　// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。

　　InitializeComponent();

　　base.OnInit(e);

　　}

　　/// <summary>

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

　　/// 此方法的内容。

　　/// </summary>

　　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());

　　}

教程首页更多教程