• js模拟权限选择


    练习:权限选择页面,选择、撤回、全部选择、全部撤回。
    =========================

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



  • 相关阅读:
    gulp之webpack-stream模块
    AMD、CMD与commonJS
    gulp之gulp-replace模块
    gulp之gulp-uglify模块
    gulp之gulp-sequence模块
    规范-命名、词汇
    gulp之gulp-connect模块
    angularjs $injector:nomod
    because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled
    jxls2 java.lang.NegativeArraySizeException
  • 原文地址:https://www.cnblogs.com/jesselzj/p/2348364.html
Copyright © 2020-2023  润新知