<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px;}
</style>
</head>
<body>
<div style="600px; height:500px; margin-top:20px">
<div style="200px; height:300px; float:left">
<select id="list1" size="10" style="200px; height:300px">
<option>山东</option>
<option>北京</option>
<option>河北</option>
<option>黑龙江</option>
<option>河南</option>
</select>
</div>
<div style="80px; height:300px; float:left">
<input type="button" value="单移" id="btn1" style="70px; height:30px" onclick="Dan()"/>
<input type="button" value="全移" id="btn2" style="70px; height:30px" onclick="Duo()"/>
</div>
<div style="200px; height:300px; float:left">
<select id="list2" size="10" style="200px; height:300px">
</select>
</div>
</div>
function Dan()
{
//把列表1选中值取出
var list1 = document.getElementById("list1");
var v = list1.value;
//造一个option项
var s = "<option class='o2'>"+v+"</option>";
//判断list2里面是否有该项
var attr = document.getElementsByClassName("o2");
var cz = true;
for(var i=0;i<attr.length;i++)
{
//alert(attr[i].innerHTML);
if(attr[i].innerHTML==v)
{
cz = false;
break;
}
}
if(cz)
{
//将option项扔到list2
var list2 = document.getElementById("list2");
list2.innerHTML +=s;
}
}
function Duo()
{
document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;
}