js模拟权限选择实现代码(select操作)

<html> <head> <title></title> <script type="text/javascript"> //移动所有项。 function moveAllOptions(selone, seltwo) { //获得selone中的每个option var opts = selone.getElementsByTagName('option'); //这种循环有问题，不能从0开始，因为opts就像集合一样， //每次将自己的元素加到别的元素下的时候这个元素就从自己子元素中自动删除。 // for (var i = 0; i < opts.length; i++) { // //将selone中的每个option都加到了seltwo中。 // seltwo.appendChild(opts[i]); // } for (var i = opts.length - 1; i >= 0; i--) { //将selone中的每个option都加到了seltwo中。 seltwo.appendChild(opts[i]); } } //移动选中项 function moveSelectedOptions(selone, seltwo) { //获取第一个元素中的所有的option var opts = selone.getElementsByTagName('option'); for (var i = opts.length - 1; i >= 0; i--) { if (opts[i].selected == true) { seltwo.appendChild(opts[i]); } } } </script> </head> <body> <select id="selNum1" multiple="multiple"> <option>添加</option> <option>修改</option> <option>删除</option> <option>保存</option> </select> <input type="button" name="name" value=">>" onclick="moveAllOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" /> <input type="button" name="name" value=">" onclick="moveSelectedOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" /> <input type="button" name="name" value="<" onclick="moveSelectedOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" /> <input type="button" name="name" value="<<" onclick="moveAllOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" /> <select id="selNum2" multiple="multiple"> </select> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

频道导航

js模拟权限选择实现代码(select操作)

您可能感兴趣的文章: