首页 / JAVASCRIPT / JavaScript基础2下拉列表左右选择

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript基础2下拉列表左右选择，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3246字，纯文字阅读大概需要5分钟。

内容图文

 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>

JavaScript基础2下拉列表左右选择 - 文章图片

内容总结

以上是互联网集市为您收集整理的JavaScript基础2下拉列表左右选择全部内容，希望文章能够帮你解决JavaScript基础2下拉列表左右选择所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/394624.html

来源：【匿名】