Ajax实现DropDownList与ListBox联动效果。选择DropDownList,左侧ListBox从服务器端获取对应项。点击Button,对左、右侧ListBox进行操作。最后在服务器端获取右侧ListBox的值
效果图:
![](/images/cnblogs_com/xpengfee/Drop_List.jpg)
目标:选择DropDownList,左侧ListBox从服务器端获取对应项。点击Button,对左、右侧ListBox进行操作。
最后在服务器端获取右侧ListBox的值
过程:
1、首先是给DropDownList弄个数据源,实际开发中一般都是从数据库去。我这演示方便就随便new 了个DataTable。
1private void DllBindData()
2 {
3 DataTable table = new DataTable("MyCategory");
4 DataColumn column;
5 DataRow row;
6 column = new DataColumn();
7 column.DataType = System.Type.GetType("System.Int32");
8 column.ColumnName = "iSysCode";
9 table.Columns.Add(column);
10
11 column = new DataColumn();
12 column.DataType = System.Type.GetType("System.String");
13 column.ColumnName = "cName";
14 table.Columns.Add(column);
15
16 row = table.NewRow();
17 row["iSysCode"] = 1;
18 row["cName"] = "编程语言";
19 table.Rows.Add(row);
20
21 row = table.NewRow();
22 row["iSysCode"] = 2;
23 row["cName"] = "编程工具";
24 table.Rows.Add(row);
25
26 row = table.NewRow();
27 row["iSysCode"] = 3;
28 row["cName"] = "数据库";
29 table.Rows.Add(row);
30
31 ddlCategory.DataSource = table.DefaultView;
32 ddlCategory.DataValueField = "iSysCode";
33 ddlCategory.DataTextField = "cName";
34 ddlCategory.DataBind();
35 }
2、有了数据,下面就开始操作了。
在DropDownList的客户端事件onchange中添加choose函数,choose中调用sendRequest_Item向服务器请求相应的数据
1
function choose(ddl)
2![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
3
sendRequest_Item('http://localhost:83/WebService/Comment.asmx','GetItemList','Get','iCategoryID='+ddl.value+'');
4
}
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
function sendRequest_Item(url, Method, HttpMethod,params) //发送请求
2![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
3
url += "/" + Method;
4
if (!HttpMethod)
5![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
6
HttpMethod = "GET";
7
}
8
req = getXMLRequester(); //建立组件
9
if (req)
10![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
11
req.onreadystatechange = processReqChange_Item;//调用[设定]进程监视函数
12
req.open(HttpMethod, url, false);
13
req.setRequestHeader("Host", "localhost");//发布时要更正 Host
14
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");//一定要加上charset,否则有乱码
15
req.setRequestHeader("Content-Length",params.length);
16
req.send(params); //发送数据参数
17
}
18
}
19
function processReqChange_Item()
20![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
21
// 监视数据传递。
22
if (req.readyState == 4)
23![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
24
if (req.status == 200)
25![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
26
xmlResponse_Item(); // connect OK 执行输出函数out()
27
}
28
else
29![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{ //抛出错误
30
alert("无法正常连接服务器,错误:\n" +
31
req.statusText+":"+req.status);
32
}
33
}
34
}
3、服务器端用了个WebService返回数据
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
[WebMethod]
2
public string GetItemList(int iCategoryID)
3![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
4
string sbResult = "<Items>";
5
6
DataTable dt = GetItemTable(iCategoryID);
7
foreach (DataRow dr in dt.Rows)
8![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
9
sbResult += string.Format("<Item value='{0}'>{1}</Item>", dr["iSysCode"].ToString(), dr["cName"].ToString());
10
}
11
sbResult+=("</Items>");
12
return sbResult;
13
14
}
15
//模拟数据库数据源表
16
public DataTable GetItemTable(int iCategoryID)
17![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
18
DataTable table = new DataTable("MyTable");
19
DataColumn column;
20
DataRow row;
21
column = new DataColumn();
22
column.DataType = System.Type.GetType("System.Int32");
23
column.ColumnName = "iSysCode";
24
table.Columns.Add(column);
25![](/Images/OutliningIndicators/InBlock.gif)
26
column = new DataColumn();
27
column.DataType = System.Type.GetType("System.String");
28
column.ColumnName = "cName";
29
table.Columns.Add(column);
30![](/Images/OutliningIndicators/InBlock.gif)
31
switch (iCategoryID)
32![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
33
case 1:
34
row = table.NewRow();
35
row["iSysCode"] = 11;
36
row["cName"] = "C#";
37
table.Rows.Add(row);
38![](/Images/OutliningIndicators/InBlock.gif)
39
row = table.NewRow();
40
row["iSysCode"] = 12;
41
row["cName"] = "Java";
42
table.Rows.Add(row);
43![](/Images/OutliningIndicators/InBlock.gif)
44
row = table.NewRow();
45
row["iSysCode"] = 13;
46
row["cName"] = "C++";
47
table.Rows.Add(row);
48![](/Images/OutliningIndicators/InBlock.gif)
49
row = table.NewRow();
50
row["iSysCode"] = 14;
51
row["cName"] = "VB";
52
table.Rows.Add(row);
53![](/Images/OutliningIndicators/InBlock.gif)
54
break;
55
case 2:
56
row = table.NewRow();
57
row["iSysCode"] = 21;
58
row["cName"] = "Visual Studio";
59
table.Rows.Add(row);
60![](/Images/OutliningIndicators/InBlock.gif)
61
row = table.NewRow();
62
row["iSysCode"] = 22;
63
row["cName"] = "JBuilder";
64
table.Rows.Add(row);
65![](/Images/OutliningIndicators/InBlock.gif)
66
row = table.NewRow();
67
row["iSysCode"] = 23;
68
row["cName"] = "Eclipse";
69
table.Rows.Add(row);
70
break;
71
case 3:
72
row = table.NewRow();
73
row["iSysCode"] = 31;
74
row["cName"] = "MySQL";
75
table.Rows.Add(row);
76![](/Images/OutliningIndicators/InBlock.gif)
77
row = table.NewRow();
78
row["iSysCode"] = 32;
79
row["cName"] = "SQL Server";
80
table.Rows.Add(row);
81![](/Images/OutliningIndicators/InBlock.gif)
82
row = table.NewRow();
83
row["iSysCode"] = 33;
84
row["cName"] = "Oracle";
85
table.Rows.Add(row);
86![](/Images/OutliningIndicators/InBlock.gif)
87
row = table.NewRow();
88
row["iSysCode"] = 34;
89
row["cName"] = "DB2";
90
table.Rows.Add(row);
91
break;
92
default:
93
row = table.NewRow();
94
row["iSysCode"] = 11;
95
row["cName"] = "C#";
96
table.Rows.Add(row);
97![](/Images/OutliningIndicators/InBlock.gif)
98
row = table.NewRow();
99
row["iSysCode"] = 12;
100
row["cName"] = "Java";
101
table.Rows.Add(row);
102![](/Images/OutliningIndicators/InBlock.gif)
103
row = table.NewRow();
104
row["iSysCode"] = 13;
105
row["cName"] = "C++";
106
table.Rows.Add(row);
107![](/Images/OutliningIndicators/InBlock.gif)
108
row = table.NewRow();
109
row["iSysCode"] = 14;
110
row["cName"] = "VB";
111
table.Rows.Add(row);
112
break;
113
}
114
return table;
115
}
4、分析操作返回的数据(XML格式)这个是关键,在这花了我好长一段时间:用xmlDoc.getElementsByTagName("Item")方法得到的options,长度length总是为0,但确实是有数据返回;用responseText可以正确取出数据。在网上搜了半天也没找到一个适当的解决方法。郁闷n久之后,找到了问题所在,原来是数据被Encode了。这好办,咱就给他DeEncode呗。
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
function xmlResponse_Item() //输出函数【Success】
2![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
3
var xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
4
xmlDoc.async=false;
5
xmlDoc.validateOnParse=false;
6
xmlDoc.loadXML(html(req.responseText));//从服务器端传回的数据 HTML元素被Encode 所以在这用 html 函数反编码
7
8
var lbItem = document.getElementById("lbItem");
9
lbItem.options.length=0;//清空列表框
10
11
var options=xmlDoc.getElementsByTagName("Item");
12
13
for (var i = 0;i<options.length;i++)
14![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
15
lbItem.add(new Option(options[i].text,options[i].getAttribute("value")));
16
}
17
}
5、这样一来,DropDownList就可以和左侧的ListBox实现联动了。接下来是如何操作它了。这里我只写了最上面两个按钮的点击实现,大家可以根据自己的需要实现其他的两个。看一下JS代码:
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
//移动项
2
function move(type)
3![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
4
var lbItem=document.getElementById("lbItem");//左侧列表
5
var lbResult=document.getElementById("lbResult");//右侧列表
6
if(type=="right")//单项右移
7![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
8
var selIndex=lbItem.selectedIndex;//取出选中项索引
9
if(lbItem.selectedIndex==-1)//没有选择
10
selIndex=0;//没有选择,设为第一项
11
//1.取出选中项内容,移除当前List项
12
var text=lbItem.options[selIndex].text;
13
var value=lbItem.options[selIndex].value;
14
15
if(IsExist(lbResult,text)==true)
16
return;
17
lbItem.remove(selIndex);
18
//2.增加目标List
19
var option=new Option(text,value,true,true);
20
lbResult.add(option);
21
}
22
if(type=="rightAll")//右移左侧所有项
23![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
24
//lbResult.options.length=0;//清空目标List
25
for(var i=0;i<lbItem.length;i++)
26![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
27
var text=lbItem.options[i].text;
28
var value=lbItem.options[i].value;
29
if(IsExist(lbResult,text)==false)//只有目标List没有的才添加
30![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
31
lbResult.add(new Option(text,value,true,true));
32
}
33
}
34
35
lbItem.options.length=0;//清空所操作的List
36
}
37
}
38
//所选项是否在指定列表框 已经存在
39
function IsExist(item,text)
40![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
41
var result=false;
42
for(var i=0;i<item.length;i++)
43![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
44
if(item.options[i].text==text)
45![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
46
result=true;
47
}
48
}
49
return result;
50
}
6、进行到这里,右侧的ListBox已经有了结果项了。剩下的是如何在服务器端获取这部分数据。Test了几下表明用Request.Form这种根本无法直接获取到所需数据。那只好转个弯,先将数据放在hiddenField里,然后在服务器端方法里取出来。OK,大功告成!
感受:
本来以为弄这么个小东西顶多一上午时间就够了,没想到中间出现了不少问题,一个个解决后,发现竟然用了我一整天(包括晚上啊)的时间。唉,看来做什么事都不能大意啊。另外,大家有什么更好的方法,欢迎一起研究研究,呵呵!