求助：用JS实现两个select里的option值的传递
现在有两个select多选框，把左边select的option添加到右边的select里，左边的select里的所有选项不能改变，从左边添加到右边的时候实现单个添加和批量添加。然后右边的select实现单个删除和全部删除的功能。
页面源码如下：
<BODY>
<table width="790" border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td height="15" colspan="7" align="left" valign="middle"><hr size="1" noshade></td>
</tr>
<tr align="center" valign="middle">
<td height="20" colspan="2" align="right"> </td>
<td width="150" valign="middle">左select</td>
<td width="85"> </td>
<td>右select</td>
<td> </td>
<td> </td>
</tr>
<tr align="center" valign="middle">
<td height="198" colspan="2" align="right"></td>
<td align="center" valign="middle"><select name="select8" size="16" multiple class="select1">
<option>aaaaaaaa</option>
<option>bbbbbbbb</option>
<option>cccccccc</option>
<option>dddddddd</option>
<option>eeeeeeee</option>
<option>ffffffff</option>
<option>gggggggg</option>
<option>hhhhhhhh</option>
</select>
</td>
<td valign="middle"><p class="button1">
<input name="search23" type="button" class="input0" id="search232" value="添加多个">
<br>
<input name="search2" type="button" class="input0" id="search25" value="添加单个">
<br>
<input name="search222" type="button" class="input0" id="search2223" value="删除单个">
<br>
<input name="search22" type="button" class="input0" id="search224" value="全部删除">
</p>
</td>
<td align="center" valign="middle"><select name="select" size="16" multiple class="select1">
<option></option>
</select>
</td>
</tr>
</table>
</BODY>
问题点数：10、回复次数：5Top
1 楼ice_berg16（寻梦的稻草人）回复于 2006-06-01 09:09:58 得分 0
<BODY>
<table width="790" border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td height="15" colspan="7" align="left" valign="middle"><hr size="1" noshade></td>
</tr>
<tr align="center" valign="middle">
<td height="20" colspan="2" align="right"> </td>
<td width="150" valign="middle">左select</td>
<td width="85"> </td>
<td>右select</td>
<td> </td>
<td> </td>
</tr>
<tr align="center" valign="middle">
<td height="198" colspan="2" align="right"></td>
<td align="center" valign="middle"><select name="source" id="source" size="16" multiple>
<option>aaaaaaaa</option>
<option>bbbbbbbb</option>
<option>cccccccc</option>
<option>dddddddd</option>
<option>eeeeeeee</option>
<option>ffffffff</option>
<option>gggggggg</option>
<option>hhhhhhhh</option>
</select>
</td>
<td valign="middle"><p class="button1">
<input name="search23" type="button" class="input0" id="search232" value="添加多个" onclick="add(2)">
<br>
<input name="search2" type="button" class="input0" id="search25" value="添加单个" onclick="add(1)">
<br>
<input name="search222" type="button" class="input0" id="search2223" value="删除单个" onclick="remove(1)">
<br>
<input name="search22" type="button" class="input0" id="search224" value="全部删除" onclick="remove(2)">
</p>
</td>
<td align="center" valign="middle"><select name="dest" id="dest" size="16" multiple>
</select>
</td>
</tr>
</table>
</BODY>
<script language="javascript">
<!--
var s = document.getElementById("source");
var d = document.getElementById("dest");
function add(type){
for(i=0;i<s.options.length;i++)
{
if( s.options[i].selected == true )
{
d.options.add( new Option( s[i].text,s[i].value ) );
if( type == 1 ) break;
}
}
}
function remove(type){
if( type==2 )
{
d.options.length=0;
return;
}
for(i=0;i<d.options.length;i++)
{
if( d.options[i].selected == true )
{
d.options.remove(i);
return;
}
}
}
//-->
</script>Top
2 楼andrewy（上过大学,没给发证）回复于 2006-06-01 09:21:28 得分 0
怎么才能让右select已经有的选项不再添加进来？Top
3 楼kokubo_wing（假装父母富裕是违法行为）回复于 2006-06-10 13:31:16 得分 0
<script language="javascript">
function Add(ObjSource,ObjTarget)
{
for(var i=ObjSource.length-1;i>=0;i--)
{
if(ObjSource.options[i].selected)
{
var opt=document.createElement("OPTION");
ObjTarget.add(opt);
opt.value=ObjSource.options[i].value;
opt.text=ObjSource.options[i].text;
ObjSource.options.removeChild(ObjSource.options[i]);
opt.selected=true;
}
}
}
function AddAll(ObjSource,ObjTarget)
{
SelectAll(ObjSource);
Add(ObjSource,ObjTarget);
}
function SelectAll(ObjSource)
{
for(var i=0;i<ObjSource.length;i++)
{
ObjSource.options[i].selected=true;
}
}
</script>Top
4 楼BlueDestiny（Design Life - never-online.net）回复于 2006-06-10 16:14:49 得分 0
<script language="JavaScript">
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改
{
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp')
{
toList.options.length = 0;
}
var sel = false;
for (i=0;i<fromList.options.length;i++)
{
var current = fromList.options[i];
if (current.selected)
{
sel = true;
if (current.value == 'temp')
{
alert ('你不能选择这个项目!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length] = new Option(txt,val);
fromList.options[i] = null;
i--;
}
}
if (!sel) alert ('你还没有选择任何项目');
}
function allSelect() //这是当用户按下提交按钮时，对列出选择的select对象执行全选工作，让递交至的后台程序能取得相关数据
{
List = document.forms[0].chosen;
if (List.length && List.options[0].value == 'temp') return;
for (i=0;i<List.length;i++)
{
List.options[i].selected = true;
}
}
</script>
<table border="0"> <form onSubmit="allSelect()">
<tr>
<td>
<select name="possible" size="4"
MULTIPLE width=200 style="width: 200px">
<option value="1">中国广州
<option value="2">中国上海
<option value="3">中国北京
<option value="4">中国武汉
</select>
</td>
<td><a href="javascript:copyToList('possible','chosen')">添加至右方--><br>
<br>
</a><a href="javascript:copyToList('chosen','possible')"><--添加至左方</a></td>
<td>
<select name="chosen" size="4"
MULTIPLE width=200 style="width: 200px;">
<option value="temp">从左边选择你的地区
</select>
</td>
</tr> </form>
</table>Top
5 楼ivyorg（沧海一粒）回复于 2006-09-11 13:12:32 得分 0
<script>
/*
函数说明：将一个select中的内容导出到另一个select中。
selectPara1:要导出的select
selectPara2:要导进的select
*/
function selectPara1_OnDblClick()
{
var obj1 = document.getElementById("selectPara1").options;
var obj2 = document.getElementById("selectPara2").options;
for(var itemID = 0; itemID < obj1.length; itemID++)
{
if(obj1[itemID].selected == true)
{
if(!isValueOfSelect(obj1[itemID].text))
document.all.selectPara2.add(new Option(obj1[itemID].text, obj1[itemID].value));
}
}
}
function isValueOfSelect(val)
{
var obj = document.getElementById("selectPara2").options;
if(obj.length > 0)
{
for(var k=0;k<obj.options.length;k++)
{
if(obj.options[k].text == val)
{
return true;
}
}
}
return false;
}
function selectPara2_OnDblClick()
{
var obj = document.getElementById("selectPara2").options
for(var itemID = 0; itemID < obj.length; itemID++)
{
if(obj[itemID].selected == true)
document.all.selectPara2.remove(itemID);
}
}
</script>
<html>
<body>
<table id="machineInfo" width="100%" bgColor="#cccccc" border="0">
<tr>
<td height="24"> Select</td>
</tr>
<tr height="20">
<td width="18%" align="center" valign="middle" bgcolor="#ffffff">
<img src="./images/rd_icon_aa.jpg">
</td>
<td width="35%" class="content_ssxt" align="center">
<select id="Select1" size="8" multiple ondblclick="selectPara1_OnDblClick();" runat="server" NAME="Select1">
<option>一</option>
<option>二</option>
<option>三</option>
<option>四</option>
<option>五</option>
</select>
</td>
<td width="35%" class="contentsstext" align="center">
<select id="Select2" size="8" multiple ondblclick="selectPara2_OnDblClick();" style="WIDTH: 200px"
runat="server" NAME="Select2">
</select>
</td>
<td class="contenss_text" align="right" valign="bottom">
<table width="100%">
<tr>
<td width="20"> </td>
<td class="text_button">
<asp:LinkButton ID="Linkbutton1" CssClass="text_bssink" Runat="server">Submit</asp:LinkButton>
</td>
<td width="20"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Top
