<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.8.3.js"></script> <script> $(function(){ //获得点击事件 单个 $("#selectRight").click(function(){ //2 得到被选中的元素 . 追加 id值为 right $("#left option:selected").appendTo("#right"); }); // 获得多个 单击事件 $("#selectAllRight").click(function(){ $("#left option").appendTo("#right"); }); }); </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 name="" id="left" multiple="multiple" style="100px;height:300px"> <option>iPhone!</option> <option>小米9</option> <option>华为10</option> </select> <p><a style="padding-left:25px" href="#" id="selectRight">>></a></p> <p><a style="padding-left:25px" href="#" id="selectAllRight">>>></a></p> </span> <span style="float: right;"> <font color="red">未有的商品</font> <select name="" id="right" multiple="multiple" style="100px;height:300px"> <option>opp!</option> <option>魅族</option> <option>中兴</option> </select> <p><a href="#" ><<</a></p> <p><a href="#"><<<</a></p> </span> </td> </tr> </table> </body> </html>