zoukankan      html  css  js  c++  java
  • 例子:两个列表之间移动数据

    <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;

    }

  • 相关阅读:
    ESP8266 STA TCP 客户端配置并连接通信
    Modbus CRC16 校验计算函数
    自写简易版从机Modbus
    STM32CubeIDE查看内存使用情况
    WPF 样式Style
    WPF选项卡页面分离之Page调用Window类
    WPF 多个选项卡TabControl 页面分离
    STM32Cube IDE 汉字字体变小解决办法
    浮点数double相等性比较
    Ling应用
  • 原文地址:https://www.cnblogs.com/l5580/p/5909070.html
Copyright © 2011-2022 走看看