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其實用左邊盒子和右邊效果一樣。