1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉列表左右选择</title&g ...
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 // 获取select48 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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:JavaScript基础2——下拉列表左右选择
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。