JS控制下拉列表左右选择实例代码

By | 2020年6月3日

按照国际惯例先放效果图

 

 

<!DOCTYPE html>
<html>
 <head>
  <title>JavaScript下拉列表左右选择</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" >
    function chooseToRight()
    {
      var op=document.getElementById("s1").getElementsByTagName("option");
      var select2=document.getElementById("s2");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        if(op[i].selected==true) 
        {
          select2.appendChild(op[i]);
          k--;i--;      //这里要特别注意!!!因为appendChild相当于剪切,所以每次循环之后要执行k--,i--
        }
      }
    }
    function chooseToLeft()
    {
      var op=document.getElementById("s2").getElementsByTagName("option");
      var select2=document.getElementById("s1");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        if(op[i].selected==true) 
        {
          select2.appendChild(op[i]);
          k--;i--;
        }
      }
    }
    function allToLeft()
    {
      var op=document.getElementById("s2").getElementsByTagName("option");
      var select2=document.getElementById("s1");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        select2.appendChild(op[i]);
        k--;i--;
      }
    }
    function allToRight()
    {
      var op=document.getElementById("s1").getElementsByTagName("option");
      var select2=document.getElementById("s2");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        select2.appendChild(op[i]);
        k--;i--;
      }
    }
  </script>
 </head>
 <body>
 <div style="float: left">
   <select id="s1" multiple="multiple" style="width: 120px;height: 150px">
     <option>AAAAAAA</option>
     <option>BBBBBBB</option>
     <option>CCCCCCC</option>
     <option>DDDDDDD</option>
     <option>EEEEEEE</option>
   </select><br><br>
   <input type="button" value="选中添加到右边" onclick="chooseToRight();"/><br><br>
   <input type="button" value="全部添加到右边" onclick="allToRight();"/><br>
 </div>
 <div style="float: left">
   <select id="s2" multiple="multiple" style="width: 120px;height: 150px">
     <option>1111111</option>
     <option>2222222</option>
     <option>3333333</option>
     <option>4444444</option>
     <option>5555555</option>
   </select><br><br>
   <input type="button" value="选中添加到左边" onclick="chooseToLeft();"/><br><br>
   <input type="button" value="全部添加到左边" onclick="allToLeft();"/><br>
 </div>
 </body>
</html>

 

请关注公众号获取更多资料

发表评论