<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="http://www.mamicode.com/单移" id="btn1" style="width:70px; height:30px" onclick="Dan()"/>
         <input type="button"  value="http://www.mamicode.com/全移" id="btn2" style="width:70px; height:30px" onclick="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;

}

例子：两个列表之间移动数据