JQuery—节点操作（课程选择）

最新推荐文章于 2024-08-08 08:02:01 发布

原创最新推荐文章于 2024-08-08 08:02:01 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery实现的课程选择器，通过按钮控制课程从左侧列表移至右侧，实现了课程的快速选择功能。

需求：选择课程

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="script/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            //全部向右移动的事件
            $('#btnRightAll').click(function () {
               //获取所有左侧列表框所有子元素，并且将所有子元素添加到右列表框
                $('#selectLeft').children().appendTo('#selectRight');
            });
            //全部向左移动的事件
            $('#btnLeftAll').click(function () {
                //获取所有左侧列表框所有子元素，并且将所有子元素添加到右列表框
                $('#selectRight').children().appendTo('#selectLeft');
                //第二种写法：获取右侧所有的option
                //$('#selectLeft').append($('#selectRight option'));
            });
            //“选中右移”按钮绑定事件
            $('#btnRight').click(function () {
                //获取到所有被选中的option
                //#selectLeft后面是有一个空格的,Select后面其实存在option，可以用空格代替
                $('#selectLeft :selected').appendTo('#selectRight');
            });
            //“选中左移”按钮绑定事件
            $('#btnLeft').click(function () {
                //获取到所有被选中的option
                //#selectRight后面是有一个空格的Select后面其实存在option，可以用空格代替
                 $('#selectRight :selected').appendTo('#selectLeft');
                //获取右侧选中的项，加到左边
                //$('#selectLeft').append($('#selectRight :selected'));
            });
        });
    </script>
</head>
<body>
    <select id="selectLeft" multiple="true">
        <option>语文</option>
        <option>数学</option>
        <option>自然</option>      
    </select>
    <input type="button" id="btnRightAll" value=">>" />
    <input type="button" id="btnRight" value=">" />
    <input type="button" id="btnLeftAll" value="<<" />
    <input type="button" id="btnLeft" value="<" />
    <select id="selectRight" multiple="true"> </select>
</body>
</html>

效果展示：