本文实例为大家分享了Jquery实现多选下拉列表左右移动的具体代码,供大家参考,具体内容如下

jquery实现核心代码

//需求:实现下拉列表选择条目左右选择功能
        $(function () {
            //右移
            $("#toRight").click(function () {
                //获取右边的下拉列表对象,append(左边选中的对象)
                $("#rightName").append($("#leftName > option:selected"));
            });
            //左移
            $("#toLeft").click(function () {
                $("#leftName").append($("#rightName > option:selected"));
            });
 })
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script  src="https://www.atool.online/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").click(function () {
                    //获取右边的下拉列表对象,append(左边选中的对象)
                    $("#rightName").append($("#leftName > option:selected"));
                });
                //左移
                $("#toLeft").click(function () {
                    $("#leftName").append($("#rightName > option:selected"));
                });
            })


        </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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部