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

前端之家收集整理的这篇文章主要介绍了JS控制下拉列表左右选择实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

按照国际惯例先放效果

 

 

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

 

猜你在找的JavaScript相关文章