权限练习(左右移动)

body中

<body>
    <div style=" margin-left:400px; margin-top:10px;">
    <select multiple="multiple" style="float: left;  40px; height: 100px;" id="se1">
        <option>添加</option>
        <option>删除</option>
        <option>修改</option>
        <option>查询</option>
        <option>打印</option>
    </select>
    <div style=" 50px; float: left; ">
        <input type="button" name="name" value=">" style=" 50px;" id="toRight" />
        <input type="button" name="name" value="<" style=" 50px;" id="toLeft" />
        <input type="button" name="name" value=">>" style=" 50px;" id="toAllLeft" />
        <input type="button" name="name" value="<<" style=" 50px;" id="toAllRight" />
    </div>
     <select multiple="multiple" style="float: left;  40px; height: 100px;" id="se2">
     </select>
    </div>
</body>

View Code

<script>中

 <script type="text/javascript">
        window.onload = function () {

            document.getElementById('toAllLeft').onclick = function () {
                leftAllToRight(document.getElementById('se1'), document.getElementById('se2'));
            };

            document.getElementById('toAllRight').onclick = function () {
                leftAllToRight(document.getElementById('se2'), document.getElementById('se1'));
            };
            //===========================


            document.getElementById('toRight').onclick = function () {
                lfttoRight(document.getElementById('se1'), document.getElementById('se2'));
            };

            document.getElementById('toLeft').onclick = function () {
                lfttoRight(document.getElementById('se2'), document.getElementById('se1'));
            };

        };
        //se1表示第一个下拉框,se2表示第二个下拉框
        function leftAllToRight(s1,s2) {
            var opts = s1.getElementsByTagName('option');
            for (var i = opts.length - 1; i >= 0; i--) {
                s2.insertBefore(opts[i],s2.firstChild);
            }

        }

        function lfttoRight(s1,s2) {
            var opts = s1.getElementsByTagName('option');
            for (var i = 0; i < opts.length; i++) {
                if (opts[i].selected) {
                    s2.appendChild(opts[i]);
                    i--;
                }
            }

        }
    </script>

View Code

效果

相关阅读:
mysql报Fatal error encountered during command execution的解决办法
C语言之算法初步（汉诺塔--递归算法）
C语言中变量的作用域和生命周期
C语言数据在内存分配
~~~
数据结构笔记
SQL笔记
Java零碎知识点
如何让eclipse在程序修改后，点击运行可以自动保存。
[转载] java中静态代码块的用法 static用法详解

原文地址：https://www.cnblogs.com/valiant1882331/p/4071463.html