开发学院 WEB开发 ASP.NET 分享个极好的无刷新二级联动下拉列表,同样适用与f... 阅读

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

　2005-10-15 17:02:56　来源：WEB开发网　　　

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

可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约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>
<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 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);