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

<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" onclick="Dan()"/>
         <input type="button"  value="全移" 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;

}

posted @ 2016-09-26 14:21  带你疯  阅读(266)  评论(0编辑  收藏  举报