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