左右选中 --- jQuery

左右选中：

　　步骤分析：

　　　　1.确定事件   click

　　　　2.编写函数

　　　　　　移动一个：

　　　　　　　　右边的下拉选追加一个   左边的选中第一个

　　　　　　移动多个

　　　　　　　　左边选中的   追缴到右边的下拉选中

　　　　　　移动全部

　　　　　　　　将左边的所有option追加到右边的下拉选

<html>
  <head>
    <title>左右选中.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                //移动一个
                $("#toRight1").click(function(){
                    //id为left的孩子并被选中的第一个
                    $("#left>option:selected:first").appendTo($("#right"));
                });
                //移动多个
                $("#toRight2").click(function(){
                    //id为left的孩子并被选中
                    $("#left>option:selected").appendTo($("#right"));
                });
                //移动全部
                $("#toRight3").click(function(){
                    //id为left的孩子
                    $("#left>option").appendTo($("#right"));
                });
            })
        </script>
    <style>
        input[type='button']{
            width:50px;
        }
    </style>
    </head> 
    <body>
        <table>
            <tr>
                <td>
                    <select id="left" multiple="true" style="width:100px" size="10">
                        <option>環</option>
                        <option>芈</option>
                        <option>琅</option>
                        <option>琊</option>
                        <option>爨</option>
                        <option>甄</option>
                        <option>槑</option>
                        <option>夔</option>
                    </select>
                </td>
                <td>
                    <input type="button" value=">" id="toRight1"><br>
                    <input type="button" value=">>" id="toRight2"><br>
                    <input type="button" value=">>>" id="toRight3"><br><br>
                    <input type="button" value="<" id="toLeft1"><br>
                    <input type="button" value="<<" id="toLeft2"><br>
                    <input type="button" value="<<<" id="toLeft3">
                </td>
                <td>
                    <select id="right" multiple="true" style="width:100px" size="10">                    
                    </select>
                </td>
            </tr>
        </table>
    </body>
</html>

 

posted @ 2020-07-20 21:56  Yisennnn丶  阅读(140)  评论(0)    收藏  举报