jQuery應用實例4：下拉列表
阿新 • • 發佈：2018-01-30
cde sub 列表 cto fun 華為 tle head alt
應用場景：左側是已有商品，右側是未有商品，選擇其中的內容點擊箭頭即可互換：
點擊大箭頭則全部內容去另一邊，或者雙擊已有商品的選項也會加入右邊：
代碼實現：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉列表左右選擇</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> $(function() { /*1.選中單擊去右邊*/ $("#selectOneToRight").click(function() { $("#left option:selected").appendTo($("#right")); }); /*2.單擊全部去右邊*/ $("#selectAllToRight").click(function() { $("#left option").appendTo($("#right")); }); /*3.選中雙擊去右邊*/ $("#left option").dblclick(function() { $("#left option:selected").appendTo($("#right")); }); $("#selectOneToLeft").click(function() { $("#right option:selected").appendTo($("#left")); }); $("#selectAllToLeft").click(function() { $("#right option").appendTo($("#left")); }); $("#right option").dblclick(function() { $("#right option:selected").appendTo($("#left")); }); }); </script> </head> <body> <table border="1" width="600" align="center"> <tr> <td> 分類名稱 </td> <td> <input type="text" name="cname" value="手機數碼" /> </td> </tr> <tr> <td> 分類描述 </td> <td> <textarea name="cdesc" rows="4" cols="20">手機數碼類商品</textarea> </td> </tr> <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> <tr> <td colspan="2"> <input type=‘submit‘ value="修改" /> </td> </tr> </table> </body> </html>
jQuery應用實例4：下拉列表