當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS练习：商品的左右选择
生活随笔
收集整理的這篇文章主要介紹了
JS练习：商品的左右选择
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
代碼：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>商品的左右選擇</title><!--步驟分析1. 確定事件: 點擊事件 :onclick事件2. 事件要觸發(fā)函數(shù) selectOne3. selectOne要做一些操作(將左邊選中的元素移動到右邊的select中)1. 獲取左邊Select中被選中的元素2. 將選中的元素添加到右邊的Select中即可--><script>function selectOne() {//1. 獲取左邊Select中被選中的元素var leftSelect = document.getElementById("leftSelect");var options = leftSelect.options;//找到右側(cè)的Selectvar rightSelect = document.getElementById("rightSelect");//遍歷找出被選中的optionfor (var i = 0; i < options.length; i++) {var option1 = options[i];if (option1.selected) {//2. 將選中的元素添加到右邊的Select中即可 rightSelect.appendChild(option1);}}}//將左邊所有的商品移動到右邊function selectAll() {//1. 獲取左邊Select中被選中的元素var leftSelect = document.getElementById("leftSelect");var options = leftSelect.options;//找到右側(cè)的Selectvar rightSelect = document.getElementById("rightSelect");//遍歷找出被選中的optionfor (var i = options.length - 1; i >= 0; i--) {var option1 = options[i];rightSelect.appendChild(option1);}}</script> </head> <body><table border="1px" width="400px"><tr><td>分類名稱</td><td><input type="text" value="手機數(shù)碼"/></td></tr><tr><td>分類描述</td><td><input type="text" value="手機數(shù)碼產(chǎn)品"/></td></tr><tr><td>分類商品</td><td><!--左邊--><div style="float: left;">已有商品<br/><select multiple="multiple" id="leftSelect" ondblclick="selectOne()"><option>華為</option><option>小米</option><option>vivo</option><option>oppo</option></select><br/><a href="#" onclick="selectOne()"> >> </a> <br/><a href="#" onclick="selectAll()"> >>> </a></div><!--右邊--><div style="float: right;">未有商品<br/><select multiple="multiple" id="rightSelect"><option>蘋果5</option><option>蘋果6</option><option>蘋果7</option><option>蘋果8</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> View Code?
轉(zhuǎn)載于:https://www.cnblogs.com/believepd/p/10012712.html
總結(jié)
以上是生活随笔為你收集整理的JS练习：商品的左右选择的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IPTV机顶盒刷机过程--山东电信【天邑
- 下一篇： Spring - Spring Boot