首页 > > 网页制作 > css >

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

2018-06-24 00:21:00来源：未知阅读 ()

 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>选项1</option>
22                 <option>选项2</option>
23                 <option>选项3</option>
24                 <option>选项4</option>
25                 <option>选项5</option>
26                 <option>选项6</option>
27                 <option>选项7</option>
28                 <option>选项8</option>
29                 <option>选项9</option>
30                 <option>选项10</option>
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>