JQuery中的multipleselect选择框

需求：选择课程
代码实现：
<!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>
效果展示：
未完，待续！
JQuery中的multipleselect选择框

猜你喜欢
