javascript DOM 权限选择案例

最新推荐文章于 2020-06-08 15:57:01 发布

原创最新推荐文章于 2020-06-08 15:57:01 发布 · 729 阅读

1 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一个简单的JavaScript权限选择器实现方案，通过自定义函数实现权限项的双向选择：包括单个选项的移动及全部选项的转移。此方案适用于需要进行权限分配的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>权限选择</title>
    <script type="text/javascript">
        //====================多选操作====================================
        function selMultiple(selectSrc, selectDes) {
            for (var i = selectSrc.childNodes.length - 1; i >= 0; i--) {
                var option = selectSrc.childNodes[i];
                if (option.selected == true) {
                    selectSrc.removeChild(option);
                    option.selected = false;
                    selectDes.appendChild(option);
                }
            }
        }
        function selectToRight() {
            var selectSrc = document.getElementById("select1");
            var selectDes = document.getElementById("select2");
            selMultiple(selectSrc, selectDes);
        }
        function selectToLeft() {
            var selectSrc = document.getElementById("select2");
            var selectDes = document.getElementById("select1");
            selMultiple(selectSrc, selectDes);
        }
        //====================全选操作====================================
        function selAll(selectSrc, selectDes) {
//            这种写法有问题,发现selectSrc.childNodes.length居然等于10,实际上只有5个元素
//            for (var i = 0; i < selectSrc.childNodes.length; i++) {
//                var option = selectSrc.childNodes[0];
//                selectSrc.removeChild(option);
//                selectDes.appendChild(option);
//            }
            var options = selectSrc.getElementsByTagName("option");
            var optLength = options.length;
            /*
            注意:for循环中不能直接使用options.length,因为selectDes.appendChild执行后
                 会导致options.length减一,所以先把options.length存放到一个变量中备用
            */
            for (var i = 0; i < optLength; i++) {
                var option = options[0]; //这里使用的始终是第0个元素
                selectDes.appendChild(option);
            }
            selectSrc.options.length = 0;
        }
        function selectToRightAll() {
            var selectSrc = document.getElementById("select1");
            var selectDes = document.getElementById("select2");
            selAll(selectSrc, selectDes);
        }
        function selectToLeftAll() {
            var selectSrc = document.getElementById("select2");
            var selectDes = document.getElementById("select1");
            selAll(selectSrc, selectDes);
        }

    </script>
</head>
<body>
    <select id="select1" multiple="multiple" style="float:left;width:100px;height:200px;">
        <option>添加</option>
        <option>删除</option>
        <option>修改</option>
        <option>保存</option>
        <option>查询</option>
    </select>
    <div style="float:left;width:50px;">
        <input type="button" style="float:left;width:100%;" value=">" onclick="selectToRight()" />
        <input type="button" style="float:left;width:100%;" value="<" onclick="selectToLeft()" />
        <input type="button" style="float:left;width:100%;" value=">>" onclick="selectToRightAll()" />
        <input type="button" style="float:left;width:100%;" value="<<" onclick="selectToLeftAll()" />
    </div>
    <select id="select2" multiple="multiple" style="float:left;width:100px;height:200px"></select>
</body>
</html>