请求高手帮助实现这个效果（两个select框之间的相互操作）？

[daliwan]

选中左边框中的一个人名点击添加按钮到右边的框中（双击该人名也可实现），反之，
选中右边框中的一个人名点击去除按钮到左边的框中（双击该人名也可实现），最后，
点击确定按钮alert出右边框中的值，并且用逗号分开（如3,2）

<form name="form1" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><select name="left" size="10">
<option value="1">张三</option>
<option value="2">李四</option>
<option value="3">王二</option>
</select></td>
<td><input type="button" value="添加>>"> <br> <input type="button" value="<<去除"></td>
<td><select name="right" size="10">
</select></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<input type="button" value="确定">
<input type="reset" value="重置">
</div></td>
</tr>
</table>
</form>

[心云意水]

<script language=javascript>
function selectMove(oSource,oTarget,cWhich) //两个选择框选项之间的移动，oSource为源选择框，oTarget为目标选择框，cWhich为提示文字，取值”左“或”右“。
{
if(!oSource.options.length)
{
alert(cWhich+"侧列表中已没有选项可选，无法移动！");
return;
}
if(oSource.selectedIndex==-1)
{
alert("操作前您首先应该从"+cWhich+"侧列表中选择一项！");
return;
}
var mySld=new Array();
for(i=0;i<oSource.options.length;i++)
if(oSource.options[i].selected)
mySld[mySld.length++]=i;
for(i=0;i<mySld.length;i++)
{
oTarget.options.length++;
oTarget.options[oTarget.options.length-1].text=oSource.options[mySld[i]].text;
oTarget.options[oTarget.options.length-1].value=oSource.options[mySld[i]].value;
}
for(i=0;i<mySld.length;i++)
{
for(j=mySld[i]-i;j<oSource.options.length-1;j++)
{
oSource.options[j].text=oSource.options[j+1].text;
oSource.options[j].value=oSource.options[j+1].value;
}
oSource.options.length--;
}
}

function moveAll(oSource,oTarget)
{
var n=oTarget.options.length;
oTarget.options.length=n+oSource.options.length;
for(i=n;i<oTarget.options.length;i++)
{
oTarget.options[i].text=oSource.options[i-n].text;
oTarget.options[i].value=oSource.options[i-n].text.value;
}
oSource.options.length=0;
}
</script>

<form name=form1>
<table class=setrole_tab>
<tr>
<td>
未加入角色<br>
<select size=15 style="width:150px;" name=notadded_role ondblclick="selectMove(document.form1.notadded_role,document.form1.added_role,'左')" multiple>
<option>aaaaaaaa</option>
<option>bbbbbbbb</option>
<option>cccccccc</option>
<option>dddddddd</option>
</select>
</td>
<td>
<a href="javascript:moveAll(document.form1.notadded_role,document.form1.added_role);">全部右移</a><br>
<a href="javascript:selectMove(document.form1.notadded_role,document.form1.added_role,'左')"><img src=images/move_right.gif alt=右移></a><br>
<a href="javascript:selectMove(document.form1.added_role,document.form1.notadded_role,'右')"><img src=images/move_left.gif alt=左移></a><br>
<a href="javascript:moveAll(document.form1.added_role,document.form1.notadded_role);">全部左移</a>
</td>
<td>
已加入角色<br>
<select size=15 style="width:150px;" name=added_role ondblclick="selectMove(document.form1.added_role,document.form1.notadded_role,'右')" multiple>
<option>eeeeeeee</option>
<option>ffffffff</option>
<option>gggggggg</option>
</select>
</td>
</tr>
</table>
</form>
提示：按住Ctrl键可进行多选

[littleboys]

<style>
td,select,input{font-size:9pt}
</style>
<script>
var subcat = new Array(); // 下拉列表数组定义
subcat[0] = new Array("计划采购员B","2","cs101");
subcat[1] = new Array("仓库管理员B","2","cs111");
subcat[2] = new Array("仓库管理员","1","111");
subcat[3] = new Array("门市管理员","1","122");
subcat[4] = new Array("计划审批员","1","MASTER");
subcat[5] = new Array("计划审批员B","2","cs100");
subcat[6] = new Array("计划采购员","1","103");
subcat[7] = new Array("统计员","1","李尚英");
subcat[8] = new Array("统计员B","2","cs133");
// 这个数组可以根据实际需要用程序继续添加元素
var onecount=subcat.length;
var c=0;d=0; // 2个select的optoins的索引位置...

function moveto2(fn,s1,s2) // ">>" Button function
{
fs1=eval(fn+"."+s1); // formName1.SelectName1
fs2=eval(fn+"."+s2);
d=fs2.options.length;
for(i=0;i<fs1.options.length;i++)
{
var myOption = new

Option(fs1.options[i].innerText,fs1.options[i].value);

fs2.options[d]=myOption ;
fs2.options[d].selected=true;
fs1.options[i].selected=true;
d++;
}
k=0;
while(k<fs1.options.length)
{
fs1.remove(k);
c--;
}
}

function moveto1(fn,s1,s2) // "<<" Button
{
fs1=eval(fn+"."+s1);
fs2=eval(fn+"."+s2);
c=fs1.options.length;
for(i=0;i<fs2.options.length;i++)
{
var myOption = new

Option(fs2.options[i].innerText,fs2.options[i].value);

fs1.options[c]=myOption ;
fs1.options[c].selected=true;
fs2.options[i].selected=true;
c++;
}
k=0;
while(k<fs2.options.length)
{
fs2.remove(k);
d--;
}
}

function move1to2(fn,s1,s2) // ">" Button
{
fs1=eval(fn+"."+s1);
fs2=eval(fn+"."+s2);
c=fs1.options.length;
d=fs2.options.length;
for(i=0;i<fs1.options.length;i++)
{
if(fs1.options[i].selected)
{
var myOption = new
Option(fs1.options[i].innerText,fs1.options[i].value);

fs2.options[d]=myOption ;
fs2.options[d].selected=true;
d++;
}
}
k=0;
while(k<fs1.options.length+3) // 这里为什么要+3，我也不知道
{
del(fn,s1,s2);
k++;
}
}

function del(fn,s1,s2) // 删除选择的列表项目
{
fs1=eval(fn+"."+s1);
fs2=eval(fn+"."+s2);
for(i=0;i<fs1.options.length;i++)
{
if(fs1.options[i].selected)
{
fs1.remove(i);
c--;
}
}
}

function move2to1(fn,s1,s2) // "<" Button
{
fs1=eval(fn+"."+s1);
fs2=eval(fn+"."+s2);
c=fs1.options.length;
for(i=0;i<fs2.options.length;i++)
{
if(fs2.options[i].selected)
{
var myOption = new
Option(fs2.options[i].innerText,fs2.options[i].value);

fs1.options[c]=myOption ;
fs1.options[c].selected=true;
c++;
}
}
k=0;
while(k<fs2.options.length+3)
{
del1(fn,s1,s2);
k++;
}
}

function del1(fn,s1,s2)
{
fs1=eval(fn+"."+s1);
fs2=eval(fn+"."+s2);
for(i=0;i<fs2.options.length;i++)
{
if(fs2.options[i].selected)
{
fs2.remove(i);
d--;
}
}
}

function changelocation(locationid) // 根据选择下拉框动态改变下面的列表内容，可要可不要
{
form1.src1.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == locationid)
{
form1.src1.options[form1.src1.length] = new Option(subcat[i][0], subcat[i][0]);
}
}

}
</script>
<form method="POST" name=form1>
<div align="center">
<center>
<table border="1" cellspacing="0" width="80%" bordercolorlight="#808080" bordercolordark="#FFFFFF" bgcolor="#F7F7F7">
<tr>
<td width="100" align="right" valign="middle">接收人：</td>
<td width="195">
<select size="1" name="ms" onChange="changelocation(this.value)">
<option value="1">石油总公司物资</option>
<option value="2">市石油公司物业公司</option>
</select>
<select size="8" name="src1" multiple>
<option value="1">Tindy省石油物资设备公司</option>
</select></td>
<td width="61" valign="middle">

<input type="button" value=" > " name="B3" onclick="move1to2('form1','src1','src2')" style="background-color: #FFFFF4; border: 1 ridge #C0C0C0"><br>
<br>

<input type="button" value=" < " name="B4" onclick="move2to1('form1','src1','src2')" style="background-color: #FFFFF4; border: 1 ridge #C0C0C0"><br>
<br>

<input type="button" value=" >> " name="B5" onclick="moveto2('form1','src1','src2')" style="background-color: #FFFFF4; border: 1 ridge #C0C0C0"><br>
<br>

<input type="button" value=" << " name="B6" onclick="moveto1('form1','src1','src2')" style="background-color: #FFFFF4; border: 1 ridge #C0C0C0"></td>
<td width="241"> <select size="8" name="src2" multiple>
</select></td>
</tr>
</table>
</center>
</div>
</form>
<script>
form1.src2.style.pixelWidth=form1.src1.scrollWidth; // 让2个select一样的宽，是个好东东
</script>

[meizz]

<table border=0 cellpadding=0 cellspacing=0><form name=meizz>
<tr><td>
<select id=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 id=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>

[daliwan]

xinyunyishui(心云意水) ：为什么点击“全部右移”的时候option的value的值得不到？alert的时候提示undefined，但是如果一个一个的选择到右边却可以得到。

[kisslan]

试试这段代码，自己以前写的，用的 multiple 支持多添多删
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

</head>

<body>
<form method=post action="">
<select multiple size="15" id="personal" style="width:200px">
<option value="1">111111111</option>
<option value="2">222222222</option>
<option value="3">333333333</option>
<option value="4">444444444</option>
<option value="5">555555555</option>
<option value="6">666666666</option>
<option value="7">777777777</option>
<option value="8">888888888</option>
<option value="9">999999999</option>
</select>
<input type="button" name="ok" value="add" onclick="add5OP()">
<input type="button" name="add" value="del" onclick="del()">
<input type="button" name="view" value="view" onclick="viewUser()">
<select size="15" style="width:200px" id="user" multiple>

</select>
<script language="JavaScript">
<!--
function oUser(id,name)
{
this.id=id;
this.name=name;
}
function add5OP()
{
var thePer = document.getElementById("personal");
var theUser = document.getElementById("user");
var Arr= new Array();
var id="";
var name = "";
for(var i=0;i<thePer.length;i++)
{
if(thePer[i].selected==true)
{
id = thePer[i].value;
name = thePer[i].text;
Arr.push(new oUser(id,name));
}
}

if(theUser.length > 0)
{
for(var i=0;i<Arr.length;i++)
{
for(var j=0;j<theUser.length;j++)
{
if(Arr[i].id == theUser[j].value)
{
Arr[i].id = "";
}
}
var stext=Arr[i].id;
var svalue=Arr[i].name;
if(stext != "")
{
oOption=new Option(svalue,stext);
theUser.add(oOption);
}
}
}
else
{
for(var i=0;i<Arr.length;i++)
{
var stext=Arr[i].id;
var svalue=Arr[i].name;
oOption=new Option(svalue,stext);
theUser.add(oOption);
}
}
}
function del()
{
var theSelect = document.getElementById("user");
var Arr2= new Array();
var id="";
var name = "";
if (theSelect.selectedIndex!=-1)
{
for(var i=0;i<theSelect.length;i++)
{
if(theSelect[i].selected==true)
{
id = theSelect[i].value;
name = theSelect[i].text;
Arr2.push(new oUser(id,name));
}
}

for(var i=0;i<Arr2.length;i++)
{
var stext=Arr2[i].id;
for(var j=0;j<theSelect.length;j++)
{
if(Arr2[i].id == theSelect[j].value)
{
theSelect.options[j]=null
}
}

}
}
else
{
alert("请先选择您要删除的成员");
}
}

function viewUser()
{
var src = "";
for(var i=0;i<document.all.user.length;i++)
{
src += document.all.user[i].value+",";
}
alert(src);
}
//-->
</script>
</form>
</body>
</html>

[zhangxdd]

http://expert.csdn.net/Expert/topic/2537/2537402.xml?temp=.2543451

[形印声传]

写个简单的：
***************************
<script>
function add(){
var ol = document.form1.left;
var or = document.form1.right;
for(i=0;i<ol.length;i++){
if(ol.options[i].selected)
{
alert('你想要添加的是::'+ol.options[i].text);
//下面开始添加option
var oo = document.createElement('OPTION');
oo.text = ol.options[i].text;
oo.value = ol.options[i].value;
or.options.add(oo);
}
}
}

function del(){
var or = document.form1.right;
for(i=0;i<or.length;i++){
if(or.options[i].selected)
{
or.remove(or.options[i]);
}
}
}
</script>
<form name="form1" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><select name="left" size="10">
<option value="1">张三</option>
<option value="2">李四</option>
<option value="3">王二</option>
</select></td>
<td><input type="button" value="添加>>" onclick=add()> <br> <input

type="button" value="<<去除" onclick=del()></td>
<td><select name="right" size="10">
</select></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<input type="button" value="确定">
<input type="reset" value="重置">
</div></td>
</tr>
</table>
</form>