小问题求解。。。。


<html>
<body>
  <select id="s1" multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
<select id="s2" multiple="multiple">
    
  </select>
<input id="Button1" type="button" value="button" onclick="ww()" />
</body>
</html>
<script>
function ww(){
 var li1 = document.getElementById("s1");
        var li2 = document.getElementById("s2");
        for (var i = 0; i < li1.length; i++) {
            if (li1.options[i].selected == true) {
                
                    var option = document.createElement("option");
                    option.value = li1.options[i].value;
                    option.text = li1.options[i].text;
                    li2.options.add(option);
                    li1.options.remove(option);
               } 
        }
}
</script>
需求如下：
两个select第一个为1、2、3，点击button把第一个select所选项移到第二个select里面，有以下问题：第一个select每次删除的都是第一个项（无论选择那项都是），而第二个select则没有问题，求解。

解决方案 »

  1.   


    <html>
    <body>
      <select id="s1" multiple="multiple">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      </select>
    <select id="s2" multiple="multiple">
       
      </select>
    <input id="Button1" type="button" value="button" onclick="ww()" />
    </body>
    </html>
    <script>
    function ww(){
     var li1 = document.getElementById("s1");
      var li2 = document.getElementById("s2");
      for (var i = 0; i < li1.options.length; i++) {
      if (li1.options[i].selected == true) {
       var option = document.createElement("option");
      option.value = li1.options[i].value;
      option.text = li1.options[i].text;
      li2.options.add(option);
      li1.options.remove(i);//remove传i就行
      i--;//length变了 需要调整i
      } 
      }
    }
    </script>
      

  2.   


    <select id="s1" multiple="multiple">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <select id="s2" multiple="multiple">
       
    </select>
    <input id="Button1" type="button" value="button" onclick="ww()" />
    </body>
    </html>
    <script>
    function $(id){return document.getElementById(id)}
    function ww(){
      var li1 = $("s1"), li2 = $("s2"),selectedIdex=0,opt=null;
      for (var i = 0; i < li1.length; i++){
        opt = document.createElement("option");    
        opt.value=li1.options[i].value;
        opt.text=li1.options[i].text;
        if (li1.options[i].selected){ opt.selected=true; }
        li2.appendChild(opt);
      }
      li1.length=0;
    }
    </script>
      

  3.   

    方法二、克隆options：
    <script>
    function $(id){return document.getElementById(id)}
    function ww(){
      var li1 = $("s1"), li2 = $("s2"),opt=null;
      for (var i = 0; i < li1.length; i++){
        var x=$("s1").options[i].cloneNode(true);     li2.appendChild(x);
      }
      li1.length=0;
    }
    </script>
      

  4.   

    方法三、克隆SELECT
    <select id="s1" multiple="multiple">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <div id=a></div>
    <input id="Button1" type="button" value="button" onclick="ww()" />
    </body>
    </html>
    <script>
    function $(id){return document.getElementById(id)}
    function ww(){
      var li1 = $("s1"), li2 = $("s2"),opt=null;
      var x=li1.cloneNode(true);  x.id="s2";
      $("a").appendChild(x) ;
      li1.length=0;
    }
    </script>