Melonico
2021-03-15
544
blog
原创

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

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

<!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>
JQuery
JQuery案例
赞
  • 作者：Melonico
  • 发表时间：2021-03-15 17:44
  • 更新时间：2021-03-15 17:44

评论

暂无评论，快来发表第一个评论吧!
留言
TOP