给你一个简单的例子供参考:
<table border=0 cellpadding=0 cellspacing=0><form name=meizz>
<tr><td>
<select name=list1 size=8 ondblclick="moveOption(this, this.form.list2)">
<option value=A>aaaaaaaaaa
<option value=B>bbbbbbbbbb
<option value=C>cccccccccc
<option value=D>dddddddddd
<option value=E>eeeeeeeeee
<option value=F>ffffffffff
<option value=G>gggggggggg
<option value=H>hhhhhhhhhh
</select></td>
<td width=40 align=center>
<input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)"><br><br>
<input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
</td><td>
<select name=list2 size=8 ondblclick="moveOption(this, this.form.list1)">
</select>
</td></tr></form>
</table><script language="JavaScript"><!--
function moveOption(e1, e2){
try{
var e = e1.options[e1.selectedIndex];
e2.options.add(new Option(e.text, e.value));
e1.options.remove(e1.selectedIndex);
} catch(e){}
}
//--></script>
<table border=0 cellpadding=0 cellspacing=0><form name=meizz>
<tr><td>
<select name=list1 size=8 ondblclick="moveOption(this, this.form.list2)">
<option value=A>aaaaaaaaaa
<option value=B>bbbbbbbbbb
<option value=C>cccccccccc
<option value=D>dddddddddd
<option value=E>eeeeeeeeee
<option value=F>ffffffffff
<option value=G>gggggggggg
<option value=H>hhhhhhhhhh
</select></td>
<td width=40 align=center>
<input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)"><br><br>
<input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
</td><td>
<select name=list2 size=8 ondblclick="moveOption(this, this.form.list1)">
</select>
</td></tr></form>
</table><script language="JavaScript"><!--
function moveOption(e1, e2){
try{
var e = e1.options[e1.selectedIndex];
e2.options.add(new Option(e.text, e.value));
e1.options.remove(e1.selectedIndex);
} catch(e){}
}
//--></script>
美中不足的是没有全部添加和全部删除麻烦能不能再给出方法~~
本人正在学习JS,希望有高手能将我的CODE给完善一下~
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<select style="WIDTH: 100px" name="list1" size="8" ondblclick="moveOption(this, this.form.list2)">
<option value="A">
aaaaaaaaaa
<option value="B">
bbbbbbbbbb
<option value="C">
cccccccccc
<option value="D">
dddddddddd
<option value="E">
eeeeeeeeee
<option value="F">
ffffffffff
<option value="G">
gggggggggg
<option value="H">
hhhhhhhhhh
</select></td>
<td width="40" align="center">
<input name="add" type="button" value=">" onclick="moveOption(this.form.list1, this.form.list2)"><br>
<br>
<input name="sub" type="button" value="<" onclick="moveOption(this.form.list2, this.form.list1)">
</td>
<td>
<select style="WIDTH: 100px" name="list2" size="8" ondblclick="moveOption(this, this.form.list1)">
</select>
</td>
</tr>
<tr>
<td align=center colspan=3>
<input type=button value=">>" onclick="moveOptionAll(this.form.list1, this.form.list2)"><label style="VISIBILITY: hidden" style="WIDTH: 100px"></label><input type=button value="<<" onclick="moveOptionAll(this.form.list2, this.form.list1)">
</td>
</tr>
</table><script language="JavaScript">
function moveOption(e1, e2){
try
{
var e = e1.options[e1.selectedIndex];
e2.options.add(new Option(e.text, e.value));
e1.options.remove(e1.selectedIndex);
}
catch(e){}
}
function moveOptionAll(e1, e2){
try
{
for (var i=e1.options.length-1;i>=0;i--)
{
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.options.remove(i);
}
}
catch(e){}
}
</script>
moveList<table>
<tr>
<td valign=top>
<select name=s1 multiple size=4 style="width:100">
<option value=1>aaaaaa
<option value=2>bbbbbb
<option value=3>cccccc
<option value=4>dddddd
<option value=5>eeeeee
<option value=6>ffffff
<option value=7>gggggg
<option value=8>hhhhhh
</select>
</td>
<td valign=middle align=center>
<input type=button name=b4 value=">" onClick="move(1)"><br>
<input type=button name=b5 value="<" onClick="move(2)">
</td>
<td valign=top>
<select name=s2 multiple size=4 style="width:100">
</select>
</td>
</tr>
<tr>
<td>
<input type=button name=b1 value=向上 onClick="up()">
<input type=button name=b2 value=向下 onClick="down()">
</td>
<td>
<input type=button name=b3 value=查看 onClick="show()">
</td>
<td>
</td>
</tr>
</table><script>
function up() {
s = document.all.s1;
v = new Array();
for(i=0;i<s.length-1;i++) {
if(! s.options[i].selected && s.options[i+1].selected) {
v.value = s.options[i].value;
v.text = s.options[i].text;
v.selected = s.options[i].selected;
s.options[i].value = s.options[i+1].value;
s.options[i].text = s.options[i+1].text;
s.options[i].selected = s.options[i+1].selected;
s.options[i+1].value = v.value;
s.options[i+1].text = v.text;
s.options[i+1].selected = v.selected;
}
}
}function down() {
s = document.all.s1;
v = new Array();
for(i=s.length-1;i>0;i--) {
if(! s.options[i].selected && s.options[i-1].selected) {
v.value = s.options[i].value;
v.text = s.options[i].text;
v.selected = s.options[i].selected;
s.options[i].value = s.options[i-1].value;
s.options[i].text = s.options[i-1].text;
s.options[i].selected = s.options[i-1].selected;
s.options[i-1].value = v.value;
s.options[i-1].text = v.text;
s.options[i-1].selected = v.selected;
}
}
}function show() {
s = document.all.s1;
v = "";
for(i=0;i<s.length;i++)
v += s.options[i].value + ":" + s.options[i].text + "\n";
alert(v);
}function move(m) {
if(m == 1) {
ss1 = document.all.s1;
ss2 = document.all.s2;
}
if(m == 2) {
ss1 = document.all.s2;
ss2 = document.all.s1;
}
v = new Array();
k = 0;
for(i=0;i<ss1.length;i++) {
if(ss1.options[i].selected) {
ss2.options[ss2.length] = new Option(ss1.options[i].text,ss1.options[i].value);
v[k] = i;
k++;
}
}
for(i=v.length-1;i>=0;i--)
ss1.options[v[i]] = null;
}
</script>
<table border=0 cellpadding=0 cellspacing=0><form name=meizz>
<tr><td>
<select name=list1 size=8 multiple ondblclick="moveOption(this, this.form.list2)">
<option value=A>aaaaaaaaaa
<option value=B>bbbbbbbbbb
<option value=C>cccccccccc
<option value=D>dddddddddd
<option value=E>eeeeeeeeee
<option value=F>ffffffffff
<option value=G>gggggggggg
<option value=H>hhhhhhhhhh
</select></td>
<td width=40 align=center>
<input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)"><br><br>
<input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
</td><td>
<select name=list2 size=8 multiple ondblclick="moveOption(this, this.form.list1)">
</select>
</td></tr></form>
</table><script language="JavaScript"><!--
function moveOption(e1, e2){
try{
var l=e1.options.length-1;
for(i=0;i<=l;i++){ var e = e1.options[e1.selectedIndex];
e2.options.add(new Option(e.text, e.value));
e1.options.remove(e1.selectedIndex);
}
} catch(e){}
}
//--></script>
但是有一点,将list1中的options添加至list2后提交这个页面在接收页面接收不到这些options的值,不知为何?!
查看html源码,list2的源代码仍然是:<select size="10" name="list2" multiple style="width:200px;" ondblclick="moveOption(this, this.form.list1)">
<!--中间什么都没有!!-->
</select>