效果如圖所示：
- 首先，選中前兩項：
- 點擊第一個按鈕，選中添加到右邊，效果如圖：
- 然後點擊全部添加到右邊，效果如圖：
- 同樣，點擊選中添加到左邊按鈕，效果如圖：
- 點擊全部添加到左邊按鈕，效果如圖：
完整代碼如圖所示：
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<div style="float:left;">
<select id="sel1" multiple="multiple" style="width:100px; height:100px;">
<option>aaaaaaaa</option>
<option>bbbbbbbb</option>
<option>cccccccc</option>
<option>dddddddd</option>
<option>eeeeeeee</option>
</select>
<div>
<input type="button" value="選中添加到右邊" onclick="selAddRight();"/><br/>
<input type="button" value="全部添加到右邊" onclick="AllAddRight();"/>
</div>
</div>
<div>
<select id="sel2" multiple="multiple" style="width:100px; height:100px;">
<option>11111111</option>
<option>22222222</option>
</select>
<div>
<input type="button" value="選中添加到左邊" onclick="selAddLeft();"/><br/>
<input type="button" value="全部添加到左邊" onclick="AllAddLeft();"/>
</div>
<div>
<script type="text/javascript">
function selAddRight(){
var sel1=document.getElementById("sel1");
var sel2=document.getElementById("sel2");
var option1=sel1.getElementsByTagName("option");
for(var i=0;i<option1.length;i++){
var option2=option1[i];
if(option2.selected==true)
{
sel2.appendChild(option2);
i--;//防止多選的時候出錯，如果多個選項同時添加到右邊，則每次循環length會減小，i會增加，會出錯。
}
}
}
function AllAddRight(){
var sel1=document.getElementById("sel1");
var sel2=document.getElementById("sel2");
var option1=sel1.getElementsByTagName("option");
for(var i=0;i<option1.length;i++){
var option2=option1[i];
sel2.appendChild(option2);
i--;
}
}
function selAddLeft(){
var sel1=document.getElementById("sel1");
var sel2=document.getElementById("sel2");
var option2=sel2.getElementsByTagName("option");
for(var i=0;i<option2.length;i++){
var option1=option2[i];
if(option1.selected==true)
{
sel1.appendChild(option1);
i--;//防止多選的時候出錯，如果多個選項同時添加到右邊，則每次循環length會減小，i會增加，會出錯。
}
}
}
function AllAddLeft(){
var sel1=document.getElementById("sel1");
var sel2=document.getElementById("sel2");
var option2=sel2.getElementsByTagName("option");
for(var i=0;i<option2.length;i++){
var option1=option2[i];
sel1.appendChild(option1);
i--;//防止多選的時候出錯，如果多個選項同時添加到右邊，則每次循環length會減小，i會增加，會出錯。
}
}
</script>
</body>
</html>