用js 和JQuery分别写下拉表的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JQuery下拉列表的使用</title>
    <style>
        select{
            width: 90px;
            height: 128px;
        }
    </style>
    <script src="jquery-2.1.4.js"></script>
    <script>
        //全部右移
        function moveAllToRight(){
         $("#left option").appendTo($("#right"));
        }

        //选中右移
        function moveToRight(){

            $("#left option:selected").appendTo($("#right"));
        }

        //选中左移
        function moveToLeft() {

            $("#right option:selected").appendTo($("#left"));
        }
        //全部左移
        function moveAllToLeft() {

            $("#right option").appendTo($("#left"));
        }
    </script>
</head>
<body>
    <select id="left" name="left" multiple="multiple" size="7">
        <option value="1">选项一</option>
        <option value="2">选项二</option>
        <option value="3">选项三</option>
        <option value="4">选项四</option>
        <option value="5">选项五</option>
        <option value="6">选项六</option>
        <option value="7">选项七</option>
    </select>

    <select id="right" name="right" multiple="multiple" size="7"></select>

    <br>
    <br>
    <input type="button" value="全部右移" onclick="moveAllToRight()">
    <input type="button" value="选中右移" onclick="moveToRight()">
    <input type="button" value="选中左移" onclick="moveToLeft()">
    <input type="button" value="全部左移" onclick="moveAllToLeft()">
</body>

</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS下拉列表的使用</title>
    <style>
        select{
            width: 90px;
            height: 128px;
        }
    </style>
    <script>
        var left;
        var right;
        window.onload = function(){
            left = document.getElementById("left");
            right = document.getElementById("right");
        }
        //全部右移
        function moveAllToRight(){
            var optionList = left.options;
            for(var i = 0; i < optionList.length; i++){
                //把左边每一个option元素添加到右边去
                right.appendChild(optionList[i]);
                i--;
            }
        }

        //选中右移
        function moveToRight(){
            var optionList = left.options;
            for(var i = 0; i < optionList.length; i++){
                if(optionList[i].selected) {//过滤出选中的选项
                    //把左边选中的每一个option元素添加到右边去
                    right.appendChild(optionList[i]);
                    i--;
                }
            }
        }

        //选中左移
        function moveToLeft(){
            var optionList = right.options;
            for(var i = 0; i < optionList.length; i++){
                if(optionList[i].selected) {//过滤出选中的选项
                    //把右边选中的每一个option元素添加到左边去
                    left.appendChild(optionList[i]);
                    i--;
                }
            }
        }

        //全部左移
        function moveAllToLeft(){
            var optionList = right.options;
            for(var i = 0; i < optionList.length; i++){
                //把右边每一个option元素添加到左边去
                left.appendChild(optionList[i]);
                i--;
            }
        }
    </script>
</head>
<body>
    <select id="left" name="left" multiple="multiple" size="7">
        <option value="1">选项一</option>
        <option value="2">选项二</option>
        <option value="3">选项三</option>
        <option value="4">选项四</option>
        <option value="5">选项五</option>
        <option value="6">选项六</option>
        <option value="7">选项七</option>
    </select>

    <select id="right" name="right" multiple="multiple" size="7"></select>

    <br>
    <br>
    <input type="button" value="全部右移" onclick="moveAllToRight()">
    <input type="button" value="选中右移" onclick="moveToRight()">
    <input type="button" value="选中左移" onclick="moveToLeft()">
    <input type="button" value="全部左移" onclick="moveAllToLeft()">
</body>

用js 和JQuery分别写下拉表的使用

猜你喜欢