zoukankan      html  css  js  c++  java
  • 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>



  • 相关阅读:
    如何判断 DataRow 中是否存在某列????
    jquery操作table中的tr,td的方法双击dblclick attr parent id原创
    oracle 取当天日期减一天 应该如何写
    走出“搜索引擎营销”三个误区
    解决方案是什么
    强制远程连接 命令
    ORACLE 异常错误处理
    HttpClient是否有默认并发数限制?
    多线程下载程序的功能需求
    STL线程库简介
  • 原文地址:https://www.cnblogs.com/jesselzj/p/2348364.html
Copyright © 2011-2022 走看看