<div style="width:600px; height:500px; margin-top:20px">

 

    <div style="width:200px; height:300px; float:left">

   　　 <select id="list1" size="10" style="width:200px; height:300px">

     　  <option>山东</option>

          <option>北京</option>

          <option>河北</option>

          <option>黑龙江</option>

          <option>河南</option>

   　　 </select>

    </div>

    <div style="width:80px; height:300px; float:left">

          <input type="button"  value="单移" id="btn1" style="width:70px; height:30px" οnclick="Dan()"/>

         <input type="button"  value="全移" id="btn2" style="width:70px; height:30px" οnclick="Duo()"/>

     

    </div>

    　　 <div style="width:200px; height:300px; float:left">

     　　<select id="list2" size="10" style="width: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;

}