使用jQuery对下拉列表框的选项进行移动demo

最新推荐文章于 2025-04-21 14:24:00 发布

原创最新推荐文章于 2025-04-21 14:24:00 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

这篇博客演示了如何使用jQuery对下拉列表框的选项进行移动，包括单个选项和多个选项的移动操作。

用jQuery操作下拉列表框中的选项，可以进行单一移动，也可以多项进行移动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 100px;
            height: 150px;
        }
    </style>

    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //全部移动到右边
            $("#btn1").click(function () {
                $("#sel").append($("option"));
            });
            //全部移动到左边
            $("#btn2").click(function () {
                $("#all").append($("option"));
            });
            //将选中项移动到右边
            $("#btn3").click(function () {
                $("#sel").append($("#all option:selected"));
            });
            //将选中项移动到左边
            $("#btn4").click(function () {
                $("#all").append($("#sel option:selected"));
            });
        });
    </script>
</head>
<body>
<select name="" id="all" multiple>
    <option value="">西瓜</option>
    <option value="">香蕉</option>
    <option value="">桔子</option>
    <option value="">苹果</option>
    <option value="">梨</option>
    <option value="">荔枝</option>
</select>
<input type="button" value=">>" id="btn1"/>
<input type="button" value="<<" id="btn2"/>
<input type="button" value=">" id="btn3"/>
<input type="button" value="<" id="btn4"/>
<select name="" id="sel" multiple>
</select>

</body>
</html>

标签

#jQuery #下拉列表