JQuery下拉列表左右選擇
阿新 • • 發佈:2018-12-17
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉列表左右選擇</title> </head> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#selectOneToRight").click(function(){ $("#left option:selected").appendTo("#right"); }); $("#left option").dblclick(function(){ $("#left option:selected").appendTo("#right"); }); $("#selectAllToRight").click(function(){ $("#left option").appendTo("#right"); }); $("#selectOneToLeft").click(function(){ $("#right option:selected").appendTo("#left"); }); $("#right option").dblclick(function(){ $("#right option:selected").appendTo("#left"); }); $("#selectAllToLeft").click(function(){ $("#right option").appendTo("#left"); }); }) </script> <body> <table border="1" width="600" align="center"> <tr> <td> 分類商品 </td> <td> <span style="float: left;"> <font color="green" face="宋體">已有商品</font><br/> <select multiple="multiple" style="width: 100px;height: 200px;" id="left"> <option>IPhone6s</option> <option>小米4</option> <option>錘子T2</option> </select> <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p> <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p> </span> <span style="float: right;"> <font color="red" face="宋體">未有商品</font><br/> <select multiple="multiple" style="width: 100px;height: 200px;" id="right"> <option>三星Note3</option> <option>華為6s</option> </select> <p><a href="#" id="selectOneToLeft"><<</a></p> <p><a href="#" id="selectAllToLeft"><<<</a></p> </span> </td> </tr> </table> </body> </html>