js操作select（添加、移除、获取select值），很实用。

如图：

153040966.jpg

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>
<html>
<TITLE>选择下拉菜单</TITLE>
<meta http-equiv= "Content-Type"  content= "text/html; charset=gb2312" >
<META NAME= "Description"  CONTENT= "Power by hill" >
</HEAD>
<body>
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>
<form method= "post"  name= "myform" >
     <table border= "0"  width= "400" >
         <tr>
             <td width= "40%" >
             <select style= "height:200px;WIDTH:300px"  multiple name= "list1"  size= "10"  ondblclick= "moveOption(document.myform.list1, document.myform.list2)" >
             <!--用forEach遍历出所有的option-->
             <option value= "北京" >北京</option>
             <option value= "上海" >上海</option>
             <option value= "山东" >山东</option>
             <option value= "安徽" >安徽</option>
             <option value= "重庆" >重庆</option>
             <option value= "福建" >福建</option>
             <option value= "甘肃" >甘肃</option>
             <option value= "广东" >广东</option>
             <option value= "广西" >广西</option>
             <option value= "贵州" >贵州</option>
             <option value= "海南" >海南</option>
             <option value= "河北" >河北</option>
             <option value= "黑龙江" >黑龙江</option>
                
             </select>
             </td>
             <td width= "20%"  align= "center" >
             <input type= "button"  value= "全部添加"  onclick= "moveAllOption(document.myform.list1, document.myform.list2)" ><br/>
             <br/>
             <input type= "button"  value= "添加"  onclick= "moveOption(document.myform.list1, document.myform.list2)" ><br/>
             <br/>
             <input type= "button"  value= "移除"  onclick= "moveOption(document.myform.list2, document.myform.list1)" ><br/>
             <br/>
             <input type= "button"  value= "全部移除"  onclick= "moveAllOption(document.myform.list2, document.myform.list1)" >
             </td>
             <td width= "40%" >
             <select style= "height:200px;WIDTH:300px"  multiple name= "list2"  size= "12"  ondblclick= "moveOption(document.myform.list2, document.myform.list1)" >
             </select>
             </td>
         </tr>
     </table>
值：<input type= "text"  name= "city"  size= "40" >
</form>
<script language= "JavaScript" >
<!--操作全部-->
function  moveAllOption(e1, e2){
var  fromObjOptions=e1.options;
for ( var  i=0;i<fromObjOptions.length;i++){
fromObjOptions[0].selected= true ;
e2.appendChild(fromObjOptions[i]);
i--;
}
document.myform.city.value=getvalue(document.myform.list2);
}
<!--操作单个-->
function  moveOption(e1, e2){
var  fromObjOptions=e1.options;
for ( var  i=0;i<fromObjOptions.length;i++){
if (fromObjOptions[i].selected){
e2.appendChild(fromObjOptions[i]);
i--;
}
}
document.myform.city.value=getvalue(document.myform.list2);
}
function  getvalue(geto){
var  allvalue =  "" ;
for ( var  i=0;i<geto.options.length;i++){
allvalue +=geto.options[i].value +  "," ;
}
return  allvalue;
}
function  changepos1111(obj,index)
{
if (index==-1){
if  (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
}
}
else  if (index==1){
if  (obj.selectedIndex<obj.options.length-1){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))
}
}
}
    
</script>
</body>
</html>