Loading
0

通过js实现移位下拉框功能(附代码)

移位下拉框实现效果如下:

通过js实现移位下拉框功能(附代码)

完整源码:

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
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1{
width:110px;
height:200px;
float:left;
text-align:center;
line-height:190px;
}
 
.s1{
width:100px;
height:200px;
}
</style>
</head>
 
<body>
<div class="div1">
<select class="s1" multiple name="ss1" id="ss1">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="orange">橙色</option>
</select>
</div>
 
<div class="div1">
<input type="button" value="获取选中项索引" style="margin-top:60px;" onclick="GetSelectedIndex();"><br />
<input type="button" value=" >> " onclick="LeftToRight();" /><br />
<input type="button" onclick="RightToLeft();" value=" << " />
</div>
<div class="div1">
<select class="s1" multiple name="ss2" id="ss2">
</select>
</div>
</body>
<script language="javascript" type="text/javascript">
//获取选中项索引
function GetSelectedIndex(){
var s1=document.getElementById("ss1");
var arr=new Array();
for(var i=0;i<s1.options.length;i++){
      if(s1.options[i].selected)
      //arr[]=i;//js动态数组不支持这种写法
      arr.push(i);
      }
alert(arr.length);
}
 
//从左往右移
function LeftToRight(){
var ss1=document.getElementById("ss1");
var ss2=document.getElementById("ss2");
var arr=new Array();//需要删除的项索引
var arrop=new Array();//需要移动的项
for(var i=0;i<ss1.options.length;i++){
      if(ss1.options[i].selected){
      arrop.push(ss1.options[i]);
      arr.push(i);
            }
      }
//删除左边项
for(var i=ss1.options.length-1;i>=0;i--){
            for(var j=arr.length-1;j>=0;j--){
                  if(arr[j]==i)
                  ss1.options.remove(arr[j]);
            }
      }
//添加右边选项
for(var i=0;i<arrop.length;i++){
      ss2.options.add(arrop[i]);
      }
}
 
//从右往左移
function RightToLeft(){
var ss1=document.getElementById("ss1");
var ss2=document.getElementById("ss2");
var arr=new Array();//需要删除的项索引
var arrop=new Array();//需要移动的项
for(var i=0;i<ss2.options.length;i++){
      if(ss2.options[i].selected){
      arrop.push(ss2.options[i]);
      arr.push(i);
            }
      }
//删除右边项
for(var i=ss2.options.length-1;i>=0;i--){
            for(var j=arr.length-1;j>=0;j--){
                  if(arr[j]==i)
                  ss2.options.remove(arr[j]);
            }
      }
//添加左边选项
for(var i=0;i<arrop.length;i++){
      ss1.options.add(arrop[i]);
      }
}
</script>
</html>

以上就是通过js实现移位下拉框功能。希望能帮助到更多的新手学习。

欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:admin@cwhello.com