<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="leftBox" multiple="multiple" style="height: 200px; width: 100px;">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>
<input type="button" value=">" onclick="move('leftBox','rightBox')"/>
<input type="button" value="<" onclick="move('rightBox','leftBox')"/>
<select id="rightBox" multiple="multiple" style="height: 200px; width: 100px;">
<option value="11">A</option>
<option value="22">B</option>
<option value="33">C</option>
<option value="44">D</option>
</select>
</body>
</html>
<script type="text/javascript">
function move(from,to) {
var fromBox = document.getElementById(from);
var toBox = document.getElementById(to);
while(fromBox.selectedIndex != -1){
toBox.appendChild(fromBox.options[fromBox.selectedIndex]);
}
}
</script>
