JQuery实现下拉列表选中条目左右移动

最新推荐文章于 2023-11-15 22:17:26 发布

zhangsan3333

最新推荐文章于 2023-11-15 22:17:26 发布

阅读量250

点赞数

文章标签： jquery 前端 javascript

aaa

本文链接：https://blog.csdn.net/djydjy3333/article/details/131737010

版权

该代码示例展示了一个使用jQuery编写的交互功能，允许用户在两个并排的多选下拉列表之间移动选中的选项。点击-->按钮，可将左边下拉列表选中的选项添加到右边；点击<--按钮，则将右边选中的选项移回左边。此功能适用于需要在两个列表间转移选项的场景。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script  src="./js/jquery-3.3.1.min.js"></script>


    <style>
        #leftName , #btn,#rightName{
            float: left;
            width: 100px;
            height: 300px;
        }
        #toRight,#toLeft{
            margin-top:100px ;
            margin-left:30px;
            width: 50px;
        }

        .border{
            height: 500px;
            padding: 100px;
        }
    </style>

    <script>

        //需求：实现下拉列表选中条目左右选择功能

        $(function () {
            //toRight
            $("#toRight").click(function () {
                //获取右边的下拉列表对象，append(左边下拉列表选中的option)
                $("#rightName").append($("#leftName > option:selected"));
            });

            //toLeft
            $("#toLeft").click(function () {
                //appendTo   获取右边选中的option，将其移动到左边下拉列表中
                $("#rightName > option:selected").appendTo($("#leftName"));

            });
        });


    </script>



</head>
<body>
<div class="border">
    <select id="leftName" multiple="multiple">
        <option>张三</option>
        <option>李四</option>
        <option>王五</option>
        <option>赵六</option>
    </select>
    <div id="btn">
        <input type="button" id="toRight" value="-->"><br>
        <input type="button" id="toLeft" value="<--">

    </div>

    <select id="rightName" multiple="multiple">
        <option>钱七</option>
    </select>

</div>


</body>
</html>

zhangsan3333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现下拉列表选中条目左右移动

/appendTo 获取右边选中的option，将其移动到左边下拉列表中。//获取右边的下拉列表对象，append(左边下拉列表选中的option)//需求：实现下拉列表选中条目左右选择功能。
复制链接

扫一扫