jquery js select左框添加到右框选中移动

发表评论
48 views

效果如图：

1.png

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="2.js"></script>
    <link rel="stylesheet" href="2.css">
</head>
<body>
    <div>
        <select id="select1" multiple="multiple">
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
            <option>选项4</option>
            <option>选项5</option>
            <option>选项6</option>
            <option>选项7</option>
        </select>
        <div>
            <button id="addRight">选中添加到右边>></button><br>
            <button id="addAllRight">全部添加到右边>></button>
        </div>
    </div>
    <div>
        <select id="select2" multiple="multiple">
        </select>
        <div>
            <button id="addLeft">《《选中删除到左边</button><br>
            <button id="addAllLeft">《《全部删除到左边</button>
        </div>
    </div>
</body>
</html>

CSS:

.select{
    width: 130px;
    height: 200px;
    display: inline-block;
}
.div1{
    float: left;
}

JS:

$(function () {
    $("#addRight").click(function () {
        $("#select1 option:selected").appendTo("#select2")
    })

    $("#addAllRight").click(function () {
        $("#select1 option").appendTo("#select2")
    })

    $("#addLeft").click(function () {
        $("#select2 option:selected").appendTo("#select1")
    })

    $("#addAllLeft").click(function () {
        $("#select2 option").appendTo("#select1")
    })
})

文件来源网络 https://blog.csdn.net/Acratons/article/details/110143336

若有侵权请联系我删除谢谢