目的：
实现一个从左边的列表框中选择一项，点击添加，该项进入到右边的列表框中，从右边的列表框中选择一项，点击删除则该项从右边的列表框中删除，类似与51job里的那个功能。
代码： 1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <script language="javascript">
5 function Add(ObjSource,ObjTarget){
6 for(var i=0;i<ObjSource.length;i++){
7 if(ObjSource.options[i].selected){
8 var opt=document.createElement("OPTION");
9 opt.value=ObjSource.options[i].value;
10 opt.text=ObjSource.options[i].text;
11 ObjTarget.add(opt);
12 ObjSource.options.removeChild(ObjSource.options[i--]);
13 }
14 }
15 }
16
17 function AddAll(ObjSource,ObjTarget){
18 SelectAll(ObjSource);
19 Add(ObjSource,ObjTarget);
20 }
21
22 function SelectAll(ObjSource){
23 for(var i=0;i<ObjSource.length;i++){
24 ObjSource.options[i].selected = true;
25 }
26 }
27
28 function fClose(){
29 var obj1 = document.getElementsByName('Target')[0];
30 returnStr = '';
31 for (var i=0;i<obj1.length;i++)
32 {
33 returnStr += obj1.options[i].text + ',' + obj1.options[i].value + ';';
34 }
35 window.returnValue = returnStr;
36 window.close();
37 }
38 </script>
39 </head>
40 <body>
41 <table width="350" height="50" border="1" style="border-collapse:collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
42 <tr>
43 <td width="150">
44 <html:select name="Source" multiple="true" size="10" style="width:250px" ondblclick="Add(document.all.Source,document.all.Target)"><html:options labelProperty="Depot_Province/entity/ORGNAME" property="Depot_Province/entity/ORGCODE"/></html:select>
45 </td>
46 <td width="50" valign="middle">
47 <p style="width:100%" align="center">
48 <input type="button" value="->" onClick="Add(document.all.Source,document.all.Target)" title="添加">
49 </p>
50 <p style="width:100%" align="center">
51 <input type="button" value=">>" onClick="AddAll(document.all.Source,document.all.Target)" title="添加全部">
52 </p>
53 <p style="width:100%" align="center">
54 <input type="button" value="<-" onClick="Add(document.all.Target,document.all.Source)" title="删除">
55 </p>
56 <p style="width:100%" align="center">
57 <input type="button" value="<<" onClick="AddAll(document.all.Target,document.all.Source)" title="删除全部">
58 </p>
59 </td>
60 <td width="150">
61 <select name="Target" multiple="multiple" size="10" style="width:250px" ondblclick="Add(document.all.Target, document.all.Source)"></select>
62 </td>
63 </tr>
64 <tr>
65 <td align="right" colspan="3"><input type=button onclick="fClose()" value="确定"></td>
66 </tr>
67 </table>
68 </body>
69 </html>
posted on 2006-06-15 09:34
千山鸟飞绝 阅读(1581)
评论(2) 编辑 收藏 所属分类:
JavaScript