JQuery——实现列表元素左右移动

最新推荐文章于 2021-02-22 11:33:26 发布

Melonico

最新推荐文章于 2021-02-22 11:33:26 发布

阅读量1.3k

点赞数 1

分类专栏： JQuery JQuery小案例文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_45852430/article/details/107068904

版权

JQuery 同时被 2 个专栏收录

4 篇文章

订阅专栏

JQuery小案例

2 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的下拉列表项双向移动的方法，通过按钮点击事件，可以将左侧下拉列表中的选项移动到右侧，或将右侧的选项移动回左侧。此功能常见于用户界面设计中，用于直观地展示选项的转移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面显示
在这里插入图片描述
页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表左右移动</title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        .select_body{
            width: 500px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .btn{
            display: flex;
            flex-direction: column;
        }
        input{
            margin: 20px;
        }
        select{
            width: 50px;
            height: 100px;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="select_body">
        <select id="left" multiple="multiple">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <div class="btn">
            <input type="button" value=">>>" id="toRight">
            <input type="button" value="<<<" id="toLeft">
        </div>
        <select id="right" multiple="multiple">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
</body>
</html>

将左侧选中项移到右侧
获取左侧列表选中内容

$("#left > option:selected");

使用appendTo()方法将左侧列表选中内容添加到右侧列表

$("#left > option:selected").appendTo($("#right"));

给toRight按钮绑定单击事件

$("#toRight").click(function () {
	$("#left > option:selected").appendTo($("#right"));
})

将右侧选中项移到左侧
获取右侧列表选中内容

$("#right > option:selected");

使用appendTo()方法将右侧列表选中内容添加到左侧列表

$("#right > option:selected").appendTo($("#left"));

给toLeft按钮绑定单击事件

$("#toLeft").click(function () {
	$("#right > option:selected").appendTo($("#left"));
})

实现效果
选中左侧内容
在这里插入图片描述
点击按钮移至右侧

选中右侧内容

点击按钮移至左侧

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表左右移动</title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        .select_body{
            width: 500px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .btn{
            display: flex;
            flex-direction: column;
        }
        input{
            margin: 20px;
        }
        select{
            width: 50px;
            height: 100px;
            margin: 30px;
        }
    </style>
    <script>
        $(function () {
            $("#toRight").click(function () {
                $("#left > option:selected").appendTo($("#right"));
            })
            $("#toLeft").click(function () {
                $("#right > option:selected").appendTo($("#left"));
            })
        })
    </script>
</head>
<body>
    <div class="select_body">
        <select id="left" multiple="multiple">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <div class="btn">
            <input type="button" value=">>>" id="toRight">
            <input type="button" value="<<<" id="toLeft">
        </div>
        <select id="right" multiple="multiple">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
</body>
</html>