JavaScript案例五：下拉列表左右选择

用JavaScript实现下拉列表左右选择，很简单，不过要特别注意循环时要注意变量是否发生了变化（见代码）

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

运行效果：

posted @ 2016-10-11 19:35  凌晨。。。三点  阅读(491)  评论(0)  编辑  收藏  举报