【javaweb】JS實現商品的左右選擇
阿新 • • 發佈：2018-12-10
實現效果：
步驟分析： 1. 確定事件: 點選事件 :onclick事件
2. 事件要觸發函式 selectOne
3. selectOne要做一些操作
(將左邊選中的元素移動到右邊的select中)
1. 獲取左邊Select中被選中的元素
2. 將選中的元素新增到右邊的Select中就可以
原始碼如下：
<html> <head> <meta charset="utf-8" /> <title>商品的左右選擇</title> <script> function selectOne(){ //獲取左邊select全部option元素 var leftSelect=document.getElementById("leftSelect"); var options=leftSelect.options; //獲取右邊select var rightSelect=document.getElementById("rightSelect"); //遍歷找出被選中的option for(var i=0;i<options.length;i++){ var option1=options[i]; //selected是option的屬性,表示若當前選項被選中則返回true if(option1.selected){ //將選中的元素新增到右邊的Select中就可以 rightSelect.appendChild(option1); } } } function selectAll(){ //獲取左邊select全部option元素 var leftSelect=document.getElementById("leftSelect"); var options=leftSelect.options; //獲取右邊select var rightSelect=document.getElementById("rightSelect"); //遍歷把全部option都移到右邊select for(var i=options.length-1;i>=0;i--){ rightSelect.appendChild(options[i]); } } </script> </head> <body> <table border="1px" width="400px"> <tr> <td>分類名稱</td> <td> <input type="text" placeholder="手機數碼" /> </td> </tr> <tr> <td>分類描述</td> <td> <input type="text" placeholder="這裡面都是手機數碼" /> </td> </tr> <tr> <td>分類商品</td> <td> <!-- 左邊下拉欄 --> <div style="float: left;"> 已有商品<br /> <!-- multiple屬性是使下拉列表全部顯示 --> <select multiple="multiple" id="leftSelect"> <option>蘋果6</option> <option>華為</option> <option>小米</option> <option>錘子</option> </select> <br /> <!-- >是轉義字元大於號的意思 --> <a href="#" onclick="selectOne()"> >> </a><br /> <a href="#" onclick="selectAll()">>>></a> </div > <!-- 右邊下拉欄 --> <div style="float: right;"> 未有商品<br /> <!-- multiple屬性是使下拉列表全部顯示 --> <select multiple="multiple" id="rightSelect"> <option>oppo</option> <option>洛基亞</option> <option>波導</option> <option>魅族</option> </select> <br /> <!-- <是轉義字元小於號的意思 --> <a href="#"> << </a><br /> <a href="#"><<<</a> </div> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="提交" /> </td> </tr> </table> </body> </html>