function sel1AddTosel2() { var oSelectOption = document.getElementById("select1"); var oInsertOption = document.getElementById("select2"); for(var i=0;i<oSelectOption.length;i++) { if(oSelectOption[i].selected) { var oInsert = new Option(oSelectOption[i].text,oSelectOption[i].value); oInsertOption.options.add(oInsert); } } }
省去判断，再简洁点<script type="text/javascript"> function moveOption(l,i){ var s1=document.getElementById("select"+l); var s2=document.getElementById("select"+(l==2?1:2)); for(var n = s1.options.length - 1; n >= 0; n--){ if((s1[n].selected == true&&1==i)||2==i){ var option=new Option(s1.options[n].innerHTML,s1.options[n].value); s2.add(option); s1.options.remove(n); } } } </script>
{
var oSelectOption = document.getElementById("select1");
var oInsertOption = document.getElementById("select2");
for(var i=0;i<oSelectOption.length;i++)
{
if(oSelectOption[i].selected)
{
var oInsert = new Option(oSelectOption[i].text,oSelectOption[i].value);
oInsertOption.options.add(oInsert);
}
}
}
<tr>
<td>
<select id="select1" style="width:100px" size="10" multiple="multiple">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" onclick="moveOption(1,1)" value="-->"/><br/>
<input type="button" onclick="moveOption(1,2)" value="==>"/><br/>
<input type="button" onclick="moveOption(2,1)" value="<--"/><br/>
<input type="button" onclick="moveOption(2,2)" value="<=="/>
</td>
<td>
<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
</td>
</tr>
</table>
<script type="text/javascript">
function moveOption(l,i){
var s1=document.getElementById("select"+l);
var s2=document.getElementById("select"+(l==2?1:2));
for(var n = s1.options.length - 1; n >= 0; n--){
if((s1[n].selected == true&&1==i)||2==i){
if(document.all){
var option=new Option(s1.options[n].innerText,s1.options[n].value);
s2.add(option);
s1.options.remove(n);
}else{
s2.add(s1.options[n]);
}
}
}
}
</script>
function moveOption(l,i){
var s1=document.getElementById("select"+l);
var s2=document.getElementById("select"+(l==2?1:2));
for(var n = s1.options.length - 1; n >= 0; n--){
if((s1[n].selected == true&&1==i)||2==i){
var option=new Option(s1.options[n].innerHTML,s1.options[n].value);
s2.add(option);
s1.options.remove(n);
}
}
}
</script>
我的意思是实现这几个按钮功能
<input type="button" onclick="moveOption(1,1)" value="-->"/><br/>
<input type="button" onclick="moveOption(1,2)" value="==>"/><br/>
<input type="button" onclick="moveOption(2,1)" value="<--"/><br/>
<input type="button" onclick="moveOption(2,2)" value="<=="/>先把这个HTML代码运行起来就看到效果了...
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<style type='text/css'></style></head>
<body><table border="1">
<tr>
<td>
<select id="select1" style="width:100px" size="10" multiple="multiple">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" onclick="move('select1','select2',false);" value="-->"/><br/>
<input type="button" onclick="move('select1','select2',true)" value="==>"/><br/>
<input type="button" onclick="move('select2','select1',false)" value="<--"/><br/>
<input type="button" onclick="move('select2','select1',true)" value="<=="/>
</td>
<td>
<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
</td>
</tr>
</table><script type='text/javascript'>
function move(src,dest,moveAll) {
src = document.getElementById(src);
dest = document.getElementById(dest);
for(var len=src.options.length-1;len>=0;len--) {
if(moveAll) {
dest.appendChild(src.options[len]);
}
else if(src.options[len].selected){
src.options[len].selected=false;
dest.appendChild(src.options[len]);
}
}
}
</script>
</body>
</html>花了1个小时整理了一下，参考了@xzy21com ,但是放弃了老式专用API，而使用了appendChild的方式，希望对你有所帮助。