小问题求解。。。。

PPMMOOT 2011-05-05 12:17:52

<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则没有问题，求解。。。。

...全文

57 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

knightzhuwei 2011-05-05

打赏
举报



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

PPMMOOT 2011-05-05

打赏
举报

非常感谢楼上的帮忙。。。。

toury 2011-05-05

打赏
举报

方法三、克隆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>

toury 2011-05-05

打赏
举报

方法二、克隆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>

toury 2011-05-05

打赏
举报



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