Js实现将选择框的内容传递到另一个选择框中

╰半夏微凉° 2022-06-11 08:09 162阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 150px;
                /*border: 1px solid red;*/
                float: left;
            }
            select{
                height:150px;
                width:60px;
            }
            input{
                margin: 20px 10px 10px 0;
            }
        </style>
        <script>
            function move(chioce){
                var left=document.getElementById("left");
                var left_option=left.children;
                var right=document.getElementById("right");
                var right_option=right.children;
    
                switch (chioce){
                    case 1:
                        for(var i=0;i<left_option.length;i++){
                            if(left_option[i].selected==true){
                                var getOption=left_option[i];
                                getOption.selected=false;
                                console.log(getOption);
                                break;
                            }
                        }
                        if(getOption){
                            right.appendChild(getOption);
                            if(left_option[0])
                            left_option[0].selected=true;
                        }
    
                        break;
                    case 2:
                        for(var i=0;i<left_option.length;){
                            left_option[i].selected=false;
                            right.appendChild(left_option[i]);
                        }
                        break;
                    case -1:
                        for(var i=0;i<right_option.length;i++){
                            if(right_option[i].selected==true){
                                var getOption=right_option[i];
                                getOption.selected=false;
                                console.log(getOption);
                                break;
                            }
                        }
                        if(getOption){
                            left.appendChild(getOption);
                            if(right_option[0])
                                right_option[0].selected=true;
                        }
                        break;
                    case -2:
                        for(var i=0;i<right_option.length;){
                            right_option[i].selected=false;
                            left.appendChild(right_option[i]);
                        }
                        break;
                }
            }
        </script>
    </head>
    <body>
    <div class="div1">
        <select id="left" name="left" multiple="multiple">
            <option value="1" selected>北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
        </select>
    </div>
    <div class="div2">
        <input type="button" value="-->" οnclick="move(1)"/>
        <input type="button" value="->>" οnclick="move(2)"/>
        <br/>
        <input type="button" value="<--" οnclick="move(-1)"/>
        <input type="button" value="<<-" οnclick="move(-2)"/>
    </div>
    <div class="div3">
        <select id="right" name="right" multiple="multiple">
            <option value="1" selected>广州</option>
            <option value="2">重庆</option>
            <option value="3">天津</option>
        </select>
    </div>
    
    </body>
    </html>

这里书要涉及到的就是元素节点的移动，注意数组的大小会改变，元素的下标也会改变，循环时要明确要找的元素的下标