js模拟权限选择

最新推荐文章于 2024-09-19 11:17:39 发布

weixin_30381793

最新推荐文章于 2024-09-19 11:17:39 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jesselzj/archive/2012/02/12/2348364.html

版权

练习：权限选择页面，选择、撤回、全部选择、全部撤回。
=========================

<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>