高分求教,请各位帮忙:如何实现两个列表框的选项双向选择??

有二个列表框,可多选。如何实现:在其中一个列表中选取多项移到另一个列表中,两者实现双向选取??

---------------------------------------------------------------

 1<html><head>
 2<script language="javascript">   
 3function moveOption(oFromList, oToList, bAll)   
 4{   
 5var nFromLen = oFromList.options.length;   
 6var nToLen = oToList.options.length;   
 7var i = 0;   
 8while (nFromLen > 0)   
 9{   
10if (oFromList.options[i].selected ¦ ¦ bAll)   
11{   
12oToList[nToLen++] = new Option(oFromList.options[i].text, oFromList.options[i].value);   
13oFromList.options[i] = null;   
14}   
15else   
16i++;   
17  
18nFromLen--;   
19}   
20  
21sortOption(oToList);   
22}   
23  
24function compare(a,b)   
25{   
26if (a.text < b.text)   
27return -1;   
28else if (a.text > b.text)   
29return 1;   
30return 0;   
31}   
32  
33function sortOption(oList)   
34{   
35if (oList.options.length > 1)   
36{   
37var optionList = new Array();   
38  
39for (var i=0; i < oList.options.length; i++)   
40optionList.push(oList.options[i]);   
41  
42optionList.sort(compare);   
43  
44oList.length = 0;   
45for (var i=0; i < optionList.length; i++)   
46oList.options[i] = optionList[i];   
47}   
48}   
49</script>
50</head><body>
51<form name="form1">
52<table>
53<tr>
54<td>
55<select multiple="" name="leftlist" size="4">
56<option value="1">1</option>
57<option value="2">2</option>
58<option value="3">3</option>
59<option value="4">4</option>
60</select>
61</td>
62<td>
63<input onclick="javascript:moveOption(rightlist, leftlist,true)" type="button" value="&lt;&lt;"/><br/>
64<input onclick="javascript:moveOption(rightlist, leftlist,false)" type="button" value="&lt;"/><br/>
65<input onclick="javascript:moveOption(leftlist, rightlist,false)" type="button" value="&gt;"/><br/>
66<input onclick="javascript:moveOption(leftlist, rightlist,true)" type="button" value="&gt;&gt;"/>
67</td>
68<td>
69<select multiple="" name="rightlist" size="4">
70</select>
71</td>
72</tr>
73</table>
74</form></body></html>

---------------------------------------------------------------

非常抱歉,看错题目了.

 1<html>
 2<head>
 3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
 4<script language="JavaScript">   
 5<!--   
 6function addSrcToDestList() {   
 7destList = window.document.forms[0].destList;   
 8srcList = window.document.forms[0].srcList;   
 9var len = destList.length;   
10for(var i = 0; i < srcList.length; i++) {   
11if ((srcList.options[i] != null) && (srcList.options[i].selected)) {   
12  
13var found = false;   
14for(var count = 0; count < len; count++) {   
15if (destList.options[count] != null) {   
16if (srcList.options[i].text == destList.options[count].text) {   
17found = true;   
18break;   
19}   
20}   
21}   
22if (found != true) {   
23destList.options[len] = new Option(srcList.options[i].text);   
24len++;   
25}   
26}   
27}   
28}   
29  
30function deleteFromDestList() {   
31var destList = window.document.forms[0].destList;   
32var len = destList.options.length;   
33for(var i = (len-1); i >= 0; i--) {   
34if ((destList.options[i] != null) && (destList.options[i].selected == true)) {   
35destList.options[i] = null;   
36}   
37}   
38}   
39// -->   
40</script>
41</head>
42<body>
43<center>
44<form method="POST">
45<table bgcolor="#FFFFCC">
46<tr>
47<td bgcolor="#FFFFCC" width="85">
48<select multiple="" name="srcList" size="6">
49<option value="1">Item 1   
50<option value="2">Item 2   
51<option value="3">Item 3   
52<option value="4">Item 4   
53<option value="5">Item 5   
54<option value="6">Item 6   
55</option></option></option></option></option></option></select>
56</td>
57<td align="center" bgcolor="#FFFFCC" width="74">
58<input onclick="javascript:addSrcToDestList()" type="button" value=" 增加到右边 "/>
59<br/><br/>
60<input onclick="javascript:deleteFromDestList();" type="button" value=" 从右边删除 "/>
61</td>
62<td bgcolor="#FFFFCC" width="69">
63<select multiple="" name="destList" size="6">
64</select>
65</td>
66</tr>
67</table>
68</form>
69</center></body>
70</html>

---------------------------------------------------------------

 1<script language="JavaScript">   
 2function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改   
 3{   
 4fromList = eval('document.forms[0].' + from);   
 5toList = eval('document.forms[0].' + to);   
 6if (toList.options.length > 0 && toList.options[0].value == 'temp')   
 7{   
 8toList.options.length = 0;   
 9}   
10var sel = false;   
11for (i=0;i<fromList.options.length;i++)   
12{   
13var current = fromList.options[i];   
14if (current.selected)   
15{   
16sel = true;   
17if (current.value == 'temp')   
18{   
19alert ('你不能选择这个项目!');   
20return;   
21}   
22txt = current.text;   
23val = current.value;   
24toList.options[toList.length] = new Option(txt,val);   
25fromList.options[i] = null;   
26i--;   
27}   
28}   
29if (!sel) alert ('你还没有选择任何项目');   
30}   
31function allSelect() //这是当用户按下提交按钮时,对列出选择的select对象执行全选工作,让递交至的后台程序能取得相关数据   
32{   
33List = document.forms[0].chosen;   
34if (List.length && List.options[0].value == 'temp') return;   
35for (i=0;i<List.length;i++)   
36{   
37List.options[i].selected = true;   
38}   
39}   
40  
41</script>
 1<table border="0"> <form onsubmit="allSelect()">
 2<tr>
 3<td>
 4<select multiple="" name="possible" size="4" style="width: 200px" width="200">
 5<option value="1">中国广州   
 6<option value="2">中国上海   
 7<option value="3">中国北京   
 8<option value="4">中国武汉   
 9  
10</option></option></option></option></select>
11</td>
12<td><a href="javascript:copyToList('possible','chosen')">添加至右方--&gt;<br/>
13<br/>
14</a><a href="javascript:copyToList('chosen','possible')">&lt;\--添加至左方</a></td>
15<td>
16<select multiple="" name="chosen" size="4" style="width: 200px;" width="200">
17<option value="temp">从左边选择你的地区   
18</option></select>
19</td>
20</tr> </form>
21</table>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus