点击按钮一个select都内容移到另一个select里

点击按钮一个select都内容移到另一个select里，求代码!!!

解决方案 »

  1.   

    https://blog.csdn.net/ducklikejava/article/details/52565730
      

  2.   

    selectB.innerHTML = selectA.innerHTML
      

  3.   

    1楼的博客也可以<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>www.jb51.net jQuery列表数据移动</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                //将左边数据移动到右边
                $("#right").click(function () {
                    //将左边option中选中的值赋给vSelect变量
                    var vSelect = $("#leftSelect option:selected");
                    //将数据添加到rightSelect中
                    vSelect.clone().appendTo("#rightSelect");
                    //同时删除leftSelect中的数据
                    vSelect.remove();
                });
                //将右边数据移动到左边
                $("#left").click(function () {
                    var vSelect = $("#rightSelect option:selected");
                    //将右边的数据追加到左边列表中
                    vSelect.clone().appendTo("#leftSelect");
                    vSelect.remove();
                });
                //将左边全部数据移到右边
                $("#rightAll").click(function () {
                    $("#rightSelect").append($("#leftSelect>option"));
                    $("#leftSelect>option").remove();
                });
                //将右边数据全部移到左边
                $("#leftAll").click(function () {
                    $("#leftSelect").append($("#rightSelect>option"));
                    $("#rightSelect>option").remove();
                });
            });
        </script>
    </head>
    <body>
        <div>
            <select id="leftSelect" multiple="multiple" style="height: 200px;width: 200px;">
                <option value="0">电影0</option>
                <option value="1">电影1</option>
                <option value="2">电影2</option>
                <option value="3">电影3</option>
                <option value="4">电影4</option>
                <option value="5">电影5</option>
            </select>
            <input type="button" id="right" value=">" />
            <input type="button" id="rightAll" value=">>>" />
            <input type="button" id="left" value="<" />
            <input type="button" id="leftAll" value="<<<" />
            <select id="rightSelect" multiple="multiple" style="height: 200px;width: 200px;">
                <option value="6">电影6</option>
                <option value="7">电影7</option>
                <option value="8">电影8</option>
                <option value="9">电影9</option>
            </select>
        </div>
    </body>
    </html>
      

  4.   

    如果你用vue开发的话：https://element.eleme.cn/#/zh-CN/component/transfer如果不是可以自己去搜索html穿梭框，或者自己写一个
      

  5.   

    自己利用jQuery写的<select name="" id="" multiple style="height:200px;width:80px;">
            <option value="">AAAA</option>
            <option value="">BBBB</option>
            <option value="">CCCC</option>
            <option value="">DDDD</option>
            <option value="">EEEEE</option>
        </select>
        <button>移动到右边</button>
        <button>移动所有的到右边</button>
        <select name="" id="" multiple style="height:200px;width:80px;">
        </select>
    $(function () {
                // 全部右移
                $("button:last").click(function () {
                    $("option").appendTo("select:last");
                });
                // 选中的右移
                $("button:first").click(function(){    
                    var $s = $("select:first").find("option:selected").appendTo("select:last");                                                                                                                                                                                                                                                                                                                                             
                }); 
            });