<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:500px; height:500px}
#left{ width:200px; height:500px; float:left}
#zhong{ width:100px; height:500px; float:left}
#right{ width:200px; height:500px; float:left}
</style>
</head>
<body>
<br />
<div id="wai">
<div id="left">
<select style="width:200px; height:300px" id="selleft" multiple="multiple">
<option value="山东">山东</option>
<option value="淄博">淄博</option>
<option value="张店">张店</option>
</select>
</div>
<div id="zhong">
<div style="margin-left:10px; margin-top:20px">
<input style="width:60px; height:30px" type="button" value=">>" onclick="moveall()" />
</div>
<div style="margin-left:10px; margin-top:30px">
<input style="width:60px; height:30px" type="button" value=">" onclick="moveone()" />
</div>
</div>
<div id="right">
<select id="selright" multiple="multiple" style="width:200px; height:300px"></select>
</div>
</div>
<script type="text/javascript">
function moveone()
{
var left = document.getElementById("selleft");
var right = document.getElementById("selright");
var xz = left.value;
var str = "<option value=‘"+xz+"‘>"+xz+"</option>";
//判断
//alert(right.childNodes.item(0));
var bs = 0;
for(var i=0;i<right.childNodes.length;i++)
{
if(right.childNodes.item(i).text==xz)
{
bs = 1;
}
}
if(bs==0)
{
//追加
right.innerHTML = right.innerHTML+str;
}
}
function moveall()
{
var left = document.getElementById("selleft");
var right = document.getElementById("selright");
right.innerHTML = left.innerHTML;
}
</script>
原文：http://www.cnblogs.com/qdlj/p/6188443.html