有二个列表框,可多选。如何实现:在其中一个列表中选取多项移到另一个列表中,两者实现双向选取??
---------------------------------------------------------------
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="<<"/><br/>
64<input onclick="javascript:moveOption(rightlist, leftlist,false)" type="button" value="<"/><br/>
65<input onclick="javascript:moveOption(leftlist, rightlist,false)" type="button" value=">"/><br/>
66<input onclick="javascript:moveOption(leftlist, rightlist,true)" type="button" value=">>"/>
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')">添加至右方--><br/>
13<br/>
14</a><a href="javascript:copyToList('chosen','possible')"><\--添加至左方</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>