【jQuery】点击“选中添加到右边”讲选中项移动到右侧下拉框

最新推荐文章于 2024-05-22 20:43:30 发布

Acratons

最新推荐文章于 2024-05-22 20:43:30 发布

阅读量1k

点赞数 2

文章标签： jquery js css html

本文链接：https://blog.csdn.net/Acratons/article/details/110143336

版权

点击“选中添加到右边”讲选中项移动到右侧下拉框

在这里插入图片描述
HTML代码

<!DOCTYPE html>
<html lang="en">
<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 class="div1">
        <select id="select1" class="select" 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" class="select" 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")
    })
})