jQuery实现左移和右移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../js/jquery-2.1.0.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 () {
                    var v1 = $("#leftName").find("option:selected").text();
                    if (v1 != null){
                        $("#rightName").append("<option>" + v1 +"</option>");
                        $("#leftName option:selected").remove();
                    }
                });

                $("#toLeft").click(function () {
                    var v2 = $("#rightName").find("option:selected").text();
                    if (v2 != null){
                        $("#leftName").append("<option>" + v2 +"</option>");
                        $("#rightName option:selected").remove();
                    }
                });
            })

        </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>
jQuery实现左移和右移

猜你喜欢
