左右切换 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                $("#selectRight").click(function(){
                    $("#left option:selected").appendTo("#right");
                });
                $("#selectLeft").click(function(){
                    $("#right option:selected").appendTo("#left");
                });
                $("#SelectAllRight").click(function(){
                    $("#left option").appendTo("#right");
                });
                $("#SelectAllLeft").click(function(){
                    $("#right option").appendTo("#left");
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>分类</td>
                <td><input type="text" name="cname" value="手机"/></td>
            </tr>
            <tr>
                <td>描述</td>
                <td>
                    <textarea name="cdesc" rows="5" cols="15">
                        手机数码商品小米9
                    </textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <span style="float: left;">
                        <font color="aqua">已经有的商品</font>
                        <select id="left" multiple="multiple" style="height: 300px;width: 100px;">
                            <option>iPhone!</option>
                            <option>小米9</option>
                            <option>荣耀10</option>
                        </select>
                        
                        <p><a style="padding-left:25px" href="#" id="selectRight";> &gt;&gt;</a></p>
                        <p><a style="padding-left:25px" href="#" id="SelectAllRight">&gt;&gt;&gt;</a></p>
                        </span>
                        
                        
                        
                        
                        <span style="float: left;">
                            <font color="red">未有的商品</font>
                        <select id="right" multiple="multiple" style="width: 100px; height: 300px;"/>
                             <option>opp!</option>
                             <option>魅族</option>
                             <option>中兴</option>
                        </select>
                        <p><a href="#" id="selectLeft">&lt;&lt;</a></p>
                        <p><a href="#" id="SelectAllLeft">&lt;&lt;</a></p>
                        
                    </span>
                </td>
            </tr>
        </table>
    </body>
</html>

 

posted @ 2019-03-07 20:49  芯-觞  阅读(123)  评论(0)    收藏  举报