js 实现将一个 ListBox 的项添加到另一个ListBox

最新推荐文章于 2022-07-25 18:58:17 发布

weixin_34408624

最新推荐文章于 2022-07-25 18:58:17 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml c# ViewUI

原文链接：http://www.cnblogs.com/doll-net/archive/2007/04/03/697940.html

本文介绍了一种处理ASP.NET中ListBox数据的方法，通过客户端JavaScript实现了数据的选择与转移，并使用隐藏字段来保存ListBox的选择结果，确保服务器端可以正确获取这些数据。

这种方式处理后，服务器端得不到ListBox的数据，可放一个隐藏控件，将ListBox的值放在里面，服务器端取隐藏控件的值。

@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="test.WEB_APP.WebForm4" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml" >
6

<head runat="server">
7

<title>无标题页</title>
8

var ObjFrom,ObjTo;
10

function intial(objFrom,objTo)
11

{
12

ObjFrom = rtObject(objFrom);
13

ObjTo = rtObject(objTo);
14

}
15

//返回ListBox对象
16

function rtObject(obj)
17

{
18

return document.form1.elements[obj];
19

}
20

function AddItem(lbFrom,lbTo)
21

{
22

intial(lbFrom,lbTo);
23

var fromCount = ObjFrom.options.length;
24

if (fromCount==0)
25

{
26

alert("没有可供选择的数据");
27

return;
28

}
29

for(var h=0;h<fromCount;h++)
30

{
31

if (ObjFrom.options[h].selected )
32

{
33

var selectValue = ObjFrom.options[h].value;
34

var selectText = ObjFrom.options[h].text;
35

var toCount = ObjTo.options.length;
36

var bool_ = false;
37

for (k=0; k<toCount; k++ )
38

{
39

if (ObjTo.options[k].value == selectValue)
40

{
41

bool_ = true;
42

break;
43

}
44

}
45

if ( bool_ == false)
46

{
47

ObjTo.options[toCount] = new Option(selectValue, selectText);
48

DeletSingle(ObjFrom,h);
49

break;
50

}
51

}
52

}
53

}
54

function DelItem(lbTo,lbFrom)
55

{
56

intial(lbTo,lbFrom);
57

var minSelected=0;
58

for (var i=ObjFrom.length-1; i>=0; i--)
59

{
60

if (ObjFrom.options[i].selected)
61

{
62

if (minSelected==0 || i<minSelected)
63

{
64

minSelected=i;
65

AddItem(lbTo,lbFrom);
66

break;
67

}
68

}
69

}
70

var i=ObjFrom.length;
71

if (i>0)
72

{
73

minSelected=i-1;
74

ObjFrom.options[minSelected].selected=true;
75

}
76

}
77

function AddItemAll(lbFrom,lbTo)
78

{
79

intial(lbFrom,lbTo);
80

var fromCount = ObjFrom.options.length;
81

if (fromCount==0)
82

return;
83

for(var h=0;h<fromCount;h++)
84

{
85

var code = ObjFrom.options[h].value;
86

var value = ObjFrom.options[h].text;
87

var toCount = ObjTo.options.length;
88

ObjTo.options[toCount] = new Option(value, code);
89

}
90

//删除所有项
91

for(var h=fromCount;h>=0;h--)
92

{
93

DeletSingle(ObjFrom,h);
94

}
95

}
96

//删除单个项
97

function DeletSingle(obj,index)
98

{
99

obj.options[index] = null;
100

}
101

//将选择的值放入隐藏控件
102

function getValues()
103

{
104

var ObjHid = document.getElementById('hidValue');
105

ObjHid.value = "";
106

var m = ObjTo.options.length;
107

for(var i = 0 ; i < m ; i++)
108

{
109

ObjHid.value += ObjTo.options[i].value+","
110

}
111

ObjHid.value = ObjHid.value.substring(0,ObjHid.value.lastIndexOf(","));
112

alert(ObjHid.value);
113

}
114

</script>
115

</head>
116

<body id="getValue">
117

<form id="form1" runat="server">
118

<div>
119

120

<table>
121

<TR>
122

<TD style="WIDTH: 79px; height: 123px;">
123

<asp:ListBox ID="lbMoveFrom" runat="server" Height="120px" SelectionMode="Multiple"
124

Width="82px">
125

<asp:ListItem>a</asp:ListItem>
126

<asp:ListItem>b</asp:ListItem>
127

<asp:ListItem>c</asp:ListItem>
128

<asp:ListItem>d</asp:ListItem>
129

<asp:ListItem>e</asp:ListItem>
130

<asp:ListItem>f</asp:ListItem>
131

<asp:ListItem>g</asp:ListItem>
132

<asp:ListItem>h</asp:ListItem>
133

</asp:ListBox></TD>
134

<TD style="WIDTH: 77px; height: 123px;" align="center">
135

<P><INPUT onclick="JavaScript:AddItem('lbMoveFrom','lbMoveTo')" tabIndex="8" type="button"
136

value="添加>>" name="Input"></P>
137

<P><INPUT onclick="JavaScript:DelItem('lbMoveTo','lbMoveFrom')" tabIndex="9" type="button"
138

value="<<移出" name="Input2"></P>
139

<P><INPUT type="button" onclick="JavaScript:AddItemAll('lbMoveFrom','lbMoveTo')" value="全部添加>>"></P>
140

<P><FONT face="宋体"></FONT> </P>
141

</TD>
142

<TD bgColor="#ffffff" style="height: 123px">
143

<asp:ListBox ID="lbMoveTo" runat="server" Height="123px" SelectionMode="Multiple"
144

Width="74px"></asp:ListBox></TD>
145

</TR>
146

</table>
147

</div>
148

<input id="hidValue" type="hidden" />
149

<input id="btn" type="button" onclick="getValues()" value="获取数据" />
150

</form>
151

</body>
152

</html>
153

转载于:https://www.cnblogs.com/doll-net/archive/2007/04/03/697940.html

js 实现 将一个 ListBox 的项添加到另一个ListBox

js 实现将一个 ListBox 的项添加到另一个ListBox