欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript基础2下拉列表左右选择

程序员文章站 2022-05-15 10:21:23
...
 1 DOCTYPE html>
 2 html>
 3     head>
 4         meta charset="UTF-8">
 5         title>下拉列表左右选择title>
 6         style type="text/css">
 7             div {
 8                 width: 200px;
 9                 float: left;
10             }
11             select {
12                 width: 100px;
13                 height: 180px;
14                 padding: 10px;
15             }
16         style>
17     head>
18     body>
19         div>
20             select multiple="multiple" id="leftSel" style="margin-left: 17px;">
21                 option>选项1option>
22                 option>选项2option>
23                 option>选项3option>
24                 option>选项4option>
25                 option>选项5option>
26                 option>选项6option>
27                 option>选项7option>
28                 option>选项8option>
29                 option>选项9option>
30                 option>选项10option>
31             select>
32             br />
33             input type="button" value="选中添加到右边 ->" onclick="choiceToRight()">
34             br />
35             input type="button" value="全部添加到右边 -->" onclick="allToRight()">
36         div>
37         
38         div>
39             select multiple="multiple" id="rightSel" style="margin-left: 17px;">select>
40             br />
41             input type="button" value=" onclick="choiceToLeft()">
42             br />
43             input type="button" value=" onclick="allToLeft()">
44         div>
45     
46         script type="text/javascript">
47             // 获取select
48             var leftSel = document.getElementById("leftSel");
49             var rightSel = document.getElementById("rightSel");
50             // 选中添加到右边
51             function choiceToRight() {
52                 toSel(leftSel, rightSel, true);
53             }
54             // 全部添加到右边
55             function allToRight() {
56                 toSel(leftSel, rightSel, false);
57             }
58             // 选中添加到左边
59             function choiceToLeft() {
60                 toSel(rightSel, leftSel, true);
61             }
62             // 全部添加到左边
63             function allToLeft() {
64                 toSel(rightSel, leftSel, false);
65             }
66             // 如果flag为true,就是选中添加,如果为false,就是全部添加
67             function toSel(fromSel, toSel, flag) {
68                 var subSel = fromSel.getElementsByTagName("option");
69                 if (flag) {
70                     for (var i = 0; i  subSel.length; i++) {
71                         if (subSel[i].selected) {
72                             toSel.appendChild(subSel[i]);
73                             // 因为subSel的length每次会-1,所以让i归零,保证每次for循环都能被执行到
74                             i--;
75                         }
76                     }
77                 } else {
78                     for (var i = 0; i  subSel.length; i++) {
79                         toSel.appendChild(subSel[i]);
80                         i--;
81                     }
82                 }
83             }
84         script>
85     body>
86 html>

JavaScript基础2下拉列表左右选择