09--jQuery基础--案例--下拉列表左右移动

最新推荐文章于 2021-08-22 21:45:02 发布

猪哥哥呀

最新推荐文章于 2021-08-22 21:45:02 发布

阅读量174

点赞数 1

分类专栏： jquery 文章标签：下拉列表左右移动jq

本文链接：https://blog.csdn.net/weixin_42133396/article/details/102622001

版权

jquery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

下拉列表内容可以左右移动

例如将李四和王五移动到右边

案例代码如下：

<!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").click(function () {
                let select = $("#leftName>option:selected");
                $("#rightName").append(select);
                $("#rightName>option").prop("selected",false);
            })
			$("#toLeft").click(function () {
				let select = $("#rightName>option:selected");
				$("#leftName").append(select);
				$("#leftName>option").prop("selected",false);
			})
        })


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

猪哥哥呀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
09--jQuery基础--案例--下拉列表左右移动

下拉列表内容可以左右移动例如将李四和王五移动到右边案例代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-3.3...
复制链接

扫一扫