標籤：gpo 選中 set cte title 建立元素 寫法 通過 child
2017-12-13 19:59:24
1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <select multiple="multiple" size="8" id="left_box"> <option>水果</option> <option>橘子</option> <option>蘋果</option> <option>香蕉</option> <option>梨子</option> <option>鳳梨</option> <option>桃子</option> <option>櫻桃</option> </select> <select multiple="multiple" size="8" id="right_box"> <option>購物車</option> </select> <input id="to_right" onclick="to_right()" value="添加" type="button"> <input id="to_left" onclick="to_left()" value="取消" type="button"> <script> var box_r=document.getElementById("right_box"); // 找到右邊盒子物件 var box_l=document.getElementById("left_box"); // 找到左邊盒子物件 var options=box_l.getElementsByTagName("option"); //找到左盒子下的所有option數組 （1） function to_right() { // 移動到右邊盒子方法 for (var i=0;i<options.length;i++){ var op=options[i]; if(op.selected==true){ //option有個屬性，如果選中就自動加入了selected屬性 所以通過這個邏輯來找出選中的option box_r.appendChild(op); //appendChild方法不光是建立元素,還可以移動元素 i--; } } } function to_left() { //移動到左邊盒子的方法 var options=document.getElementById("right_box").getElementsByTagName("option"); //（2） for (i in options){ var op=options[i]; if(op.selected==true){ box_l.appendChild(op); } } } </script></body></html>
註：代碼裡用了2種迴圈的寫法，效果略有不同。標記的2處的options其實用左邊盒子和右邊效果一樣。
js 中移動元素的方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
