Home > Article > Web Front-end > How to implement left and right movement of drop-down menu in js (code)

How to implement left and right movement of drop-down menu in js (code)

不言Original: 2018-08-13 17:19:312125browse

The content of this article is about how to implement the left and right movement of the drop-down menu (code) in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //flag标实为全部移动(true) 还是选择性移动(false)
            function mymove(flag,lid,rid){

                var leftobj = document.getElementById(lid);//得到左边select元素对象 
                var rightobj = document.getElementById(rid);//得到右边select元素对象 

                for( var i = 0 ; i < leftobj.options.length ; i++ ){                    if(flag){
                        rightobj.appendChild(leftobj.options[i]);
                        i--;
                    }else{                        if( leftobj.options[i].selected ){
                            rightobj.appendChild(leftobj.options[i]);
                            i--;
                        }
                    }
                }
            }        </script>
    </head>
    <body>
        <input type="button" value="全部左移" onclick="mymove(true,&#39;rightid&#39;,&#39;leftid&#39;)"/>
        <input type="button" value="左移" onclick="mymove(false,&#39;rightid&#39;,&#39;leftid&#39;)"/>
        <input type="button" value="右移" onclick="mymove(false,&#39;leftid&#39;,&#39;rightid&#39;)"/>
        <input type="button" value="全部右移" onclick="mymove(true,&#39;leftid&#39;,&#39;rightid&#39;)"/>


        <hr>
        <select size="6" multiple="multiple" style="width: 50px; height: 120px;" id="leftid">
            <option>武汉</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>杭州</option>
            <option>黄石</option>
        </select>

        <select size="6" multiple="multiple" style="width: 50px; height: 120px; margin-left: 100px;" id="rightid">

        </select>


    </body></html>

Related recommendations:

How to implement concatenated addback() and end() in jquery (code)

An example of using template template engine in js (code)

Implementation and usage of out-of-order image preloading in jquery

The above is the detailed content of How to implement left and right movement of drop-down menu in js (code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement concatenated addback() and end() in jquery (code)Next article：How to implement concatenated addback() and end() in jquery (code)

See more

How to implement left and right movement of drop-down menu in js (code)

Related articles