<!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; 100px;"> <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: left;"> <font color="red">未有的商品</font> <select id="right" multiple="multiple" style=" 100px; height: 300px;"/> <option>opp!</option> <option>魅族</option> <option>中兴</option> </select> <p><a href="#" id="selectLeft"><<</a></p> <p><a href="#" id="SelectAllLeft"><<</a></p> </span> </td> </tr> </table> </body> </html>