<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 300px;
border: 1px solid gray;
}
.center{
width: 50px;
margin-left: 30px;
}
.center input{
width: 30px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="left" style="overflow: hidden">
<select name="" id="left" multiple="multiple" size="12" style="width: 100px;float: left">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div style="float: left" class="center">
<p><input id="removeright" type="button" value=">"/></p>
<p><input id="allremoveright" type="button" value=">>"/></p>
<p><input id="removeleft" type="button" value="<"/></p>
<p><input id="allremoveleft" type="button" value="<<"/></p>
</div>
<select name="" id="right" multiple="multiple" size="12" style="width: 100px;float: right">
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>0</option>
</select>
</div>
</body>
<script type="text/javascript">
var left=document.getElementById("left");
var right=document.getElementById("right");
var removeright=document.getElementById("removeright");
var allremoveright=document.getElementById("allremoveright");
var removeleft=document.getElementById("removeleft");
var allremoveleft=document.getElementById("allremoveleft");
removeright.onclick=function(){
if(left.selectedIndex!=1){
var a=left.options[left.selectedIndex].cloneNode(true);
right.appendChild(a);
left.remove(left.selectedIndex);
}
};
allremoveright.onclick=function(){
for(i=0;i<left.length;i++){
var a=left.options[i].cloneNode(true);
right.appendChild(a);
}
left.length=0;
};
removeleft.onclick=function(){
if(right.selectedIndex!=1){
var a=right.options[right.selectedIndex].cloneNode(true);
left.appendChild(a);
right.remove(right.selectedIndex);
}
};
allremoveleft.onclick=function(){
for(i=0;i<right.length;i++){
var a=right.options[i].cloneNode(true);
left.appendChild(a);
}
right.length=0;
};
</script>
</html>
