這個小案例用到了節點操作，事件定義的知識點，效果如圖所示：
實現方法也很簡單，在js定義四個按鈕點擊事件，把遍歷select出來的子節點改變它們的父節點就可以實現。
代碼：
<body>
<select id = 'all' multiple="multiple">
<option>蘋果</option>
<option>西瓜</option>
<option>梨</option>
<option>橘子</option>
<option>水蜜桃</option>
</select>
<input type="button" value='>>' id = 'btn1'>
<input type="button" value='<<' id = 'btn2'>
<input type="button" value='>' id = 'btn3'>
<input type="button" value='<' id = 'btn4'>
<select id = 'select' multiple="multiple">
</select>
<script>
var all = document.getElementById('all');
var opt1 = all.children; //左側列表的五個子元素
var select = document.getElementById('select');
var opt2 = select.children; //右側列表的五個子元素
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');
btn1.onclick = function(){
var len1 = opt1.length;
for(var i = 0;i < len1 ;i++){
select.appendChild(opt1[0]);
}
} //全部向右
btn2.onclick = function(){
var len2 = opt2.length;
for(var i = 0;i < len2 ;i++){
all.appendChild(opt2[0]);
}
} //全部向左
btn3.onclick = function(){
for(var i = opt1.length - 1;i >= 0;i--){
if(opt1[i].selected == true){
opt1[i].selected = false;
select.appendChild(opt1[i]);
}
}
}
btn4.onclick = function(){
for(var i = opt2.length - 1;i >= 0;i--){
if(opt2[i].selected == true){
all.appendChild(opt2[i]);
}
}
}
</script>
</body>
當中碰到了一些小問題，就比如事件裏的for循環，我最早寫的代碼是這樣的：
for(var i = 0;i < opt1.length;i++)
這樣寫的話btn1/btn2的點擊效果會變成只拖過去了三個元素，分析了下原因，是因爲每循環一次，原子節點的數組(opt1[])長度會減1.
其他也就沒啥問題啦。