权限练习(左右移动)

body中

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

效果

posted @ 2014-11-03 16:16  寒空孤鹰  阅读(182)  评论(0)  编辑  收藏  举报