【javaweb】JQ實現商品的左右選擇
阿新 • • 發佈：2018-12-10
實現效果：
步驟分析：1. 匯入JQ的檔案
2. 文件載入函式 :頁面初始化
3.確定事件 : 點選事件 onclick
4. 事件觸發函式
（1）移動被選中的那一項到右邊
原始碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script> $(function(){ $("#a1").click(function(){ //找到被選中的那一項 //將被選中項新增到右邊 $("#rightSelect").append($("#leftSelect option:selected")); }); //將左邊所有商品移動到右邊 $("#a2").click(function(){ $("#rightSelect").append($("#leftSelect option")); }); }); </script> </head> <body> <table border="1px" width="400px"> <tr> <td>分類名稱</td> <td><input type="text" value="手機數碼"/></td> </tr> <tr> <td>分類描述</td> <td><input type="text" value="這裡面都是手機數碼"/></td> </tr> <tr> <td>分類商品</td> <td> <!--左邊--> <div style="float: left;"> 已有商品<br /> <select multiple="multiple" id="leftSelect"> <option>華為</option> <option>小米</option> <option>錘子</option> <option>oppo</option> </select> <br /> <a href="#" id="a1" > >> </a> <br /> <a href="#" id="a2"> >>> </a> </div> <!--右邊--> <div style="float: right;"> 未有商品<br /> <select multiple="multiple" id="rightSelect"> <option>蘋果6</option> <option>腎7</option> <option>諾基亞</option> <option>波導</option> </select> <br /> <a href="#"> << </a> <br /> <a href="#"> <<< </a> </div> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="提交"/> </td> </tr> </table> </body> </html>