JQuery 多选下拉列表左右移动

最新推荐文章于 2023-08-08 22:18:48 发布

_七七

最新推荐文章于 2023-08-08 22:18:48 发布

阅读量351

点赞数

分类专栏： JQuery 文章标签： js jquery

本文链接：https://blog.csdn.net/qq_43472877/article/details/106751535

版权

JQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选下拉列表左右移动</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <style>
        #left{
            height: 300px;
            width: 100px;
            font-size: 30px;
        }
        #right{
            height: 300px;
            width: 100px;
            font-size: 30px;
        }

    </style>

    <script>
        $(function () {

            $("#toRight").click(function () {
                //获取右边的下拉列表对象，append左边下拉列表的option
                $("#right").append($("#left > option:selected"))
            })
            
            $("#toleft").click(function () {
                $("#left").append($("#right > option:selected"))
            })
            
        })
    </script>

</head>

<body>
        <div class="div1">
            <select id="left" multiple="multiple">
                <option>11</option>
                <option>22</option>
                <option>33</option>
                <option>44</option>
            </select>
            <div id="btn">
                <input type="button" id="toRight" value="-->">
                <br>
                <input type="button" id="toleft" value="<--">
            </div>

            <select id="right" multiple="multiple">
                <option>55</option>
            </select>

        </div>

</body>
</html>

_七七

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery 多选下拉列表左右移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多选下拉列表左右移动</title> <script src="js/jquery-3.4.1.min.js"></script> <style> #left{ height: 300px;
复制链接

扫一扫

专栏目录