Loading

jQuery使用appendTo()函数实现Select下拉列表项的左右移动

今天jQuery学习到appendTo()函数时，定义为在被选元素的结尾插入HTML元素。
于是利用该函数做了两个Select下拉列表项左右选择移动的功能，以下为完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用appendTo实现Select下拉列表项的左右移动</title>
    <style type="text/css">
        select {
            width: 110px;
            height: 95px;
        }

        body {
            text-align: center;
        }

        div {
            width: 130px;
            display: inline-block;
        }

    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 选中选项添加到右边按钮功能
            $(":button:eq(0)").click(function () {
                $("select[name='sel1'] option:selected").appendTo("select[name='sel2']");
            });

            // 全部选项添加到右边按钮功能
            $(":button:eq(1)").click(function () {
                $("select[name='sel1'] option").appendTo("select[name='sel2']");
            });

            // 选中选项添加到左边按钮功能
            $(":button:eq(2)").click(function () {
                $("select[name='sel2'] option:selected").appendTo("select[name='sel1']");
            });

            // 全部选项添加到左边按钮功能
            $("button:eq(3)").click(function () {
                $("select[name='sel2'] option").appendTo("select[name='sel1");
            });
        });
    </script>
</head>
<body>
<div id="left">
    <!--multiple属性规定可同时选择多个选项-->
    <select size="5" multiple="multiple" name="sel1">
        <option value="opt1">选项一</option>
        <option value="opt2">选项二</option>
        <option value="opt3">选项三</option>
        <option value="opt4">选项四</option>
        <option value="opt5">选项五</option>
    </select>
    <button>选中添加到右边</button>

    <button>全部添加到右边</button>
</div>
<div id="right">
    <!--对于 windows：按住 Ctrl 按钮来选择多个选项
        对于 Mac：按住 command 按钮来选择多个选项-->
    <select multiple="multiple" name="sel2">
    </select>
    <button>选中添加到左边</button>
    <button>全部添加到左边</button>
</div>
</body>
</html>
代码运行效果：

posted @ 2021-01-30 01:56  Schieber  阅读(318)  评论(0)  编辑  收藏  举报