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

来源：互联网发布：去国外翻译软件编辑：程序博客网时间：2024/06/10 16:29

1 html代码：

<HTML>

<HEAD>

<title>WebForm</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 = "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>

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

}