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 的 HTML 页面混合、根据在下拉列表框中选择的内容,决定页面效果,用户在下拉列表框中选择页面将要使用的背景颜色
-
使用JavaScript完成控制下拉列表左右选择
-
40、(案例)下拉列表,左右选择
-
javascript - 下拉列表选择后无法变成已选择项
-
javascript - 下拉列表选择后无法变成已选择项
-
JavaScript基础2下拉列表左右选择
-
js使下拉列表框可编辑不止是选择_javascript技巧
-
jQuery插件实现select下拉框左右选择_交换内容(multiselect2side),jqueryselect插件_PHP教程
-
jQuery插件实现select下拉框左右选择_交换内容(multiselect2side),jqueryselect插件_PHP教程
-
JavaScript基础2下拉列表左右选择