zoukankan html css js c++ java

权限练习(左右移动)

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

效果

查看全文

相关阅读:
Java中的枚举与values()方法
 为什么要使用双亲委派机制?
java中finalize()方法
 jdk中rt.jar的作用
 IDEA查看maven依赖树，找出冲突jar包，以及 exclusion 冲突的包
 Linux 环境下SQLPLUS 回退键无法使用处理方法
 Hive字段注释会显示成from deserializer
LinkedList类的poll、pop等方法
 static代码块执行顺序
 机器学习--线性回归

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