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

小妮子一枚 2019-07-27 10:16:45

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

...全文

273 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

潇湘忆梦 2019-07-29

打赏
举报

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点5杀老大爷 2019-07-29

打赏
举报

selectB.innerHTML = selectA.innerHTML

寂寞花如雪 2019-07-29

打赏
举报

自己利用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"); }); });