效果如图:
选择左边列表中的某一项,点击添加,所选择的内容在右边出现。
选择右边列表中的某一项,点击删除,右边所选择项被删除
代码:
<style>
<!–
select{
width:120px;
}
–>
</style>
<table width=”282″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<form action=”” method=”post”>
<tr>
<td width=”120″ height=”242″><select name=”a1″ id=”a1″ size=”10″>
<option value=”2009-01-01″>2009-01-01</option>
<option value=”2009-01-02″>2009-01-02</option>
<option value=”2009-01-03″>2009-01-03</option>
<option value=”2009-01-04″>2009-01-04</option>
<option value=”2009-01-05″>2009-01-05</option>
<option value=”2009-01-06″>2009-01-06</option>
<option value=”2009-01-07″>2009-01-07</option>
<option value=”2009-01-08″>2009-01-08</option>
<option value=”2009-01-09″>2009-01-09</option>
<option value=”2009-01-10″>2009-01-10</option>
</select></td>
<td width=”109″ align=”center”><input type=”button” name=”Submit” value=”添加” onclick=”add()”>
<br>
<br>
<input type=”button” name=”Submit2″ value=”删除” onClick=”del()”></td>
<td width=”171″><select name=”a2″ id=”a2″ size=”10″>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr></form>
</table>
<script language=”javascript”>
function add()
{
/*
程序名称:两个select相互的添加与删除
程序开发:wangsdong
版权所属:www.aspbc.com
说明:支持原创,转载请保留此文件,谢谢
*/
s1=document.getElementById(“a1”);
l=s1.length;
j=0;
for(i=0;i<l;i++)
{
if(s1.options[i].selected==true)
{
v=s1.options[i].value;
s2=document.getElementById(“a2”);
m=0;
for(k=0;k<s2.length;k++)
{
if(s2.options[k].value==v)
{
m=1;
}
}
if(m==0)
{
var varItem = new Option(v, v);
s2.options.add(varItem);
}
else
{
alert(‘已经存在此选项’);
}
j=1;
break;
}
}
if(j==0)
{
alert(‘请选择你要添加的选项’);
}
return false;
}
function del()
{
s2=document.getElementById(“a2”);
l=s2.length;
j=0;
for(i=0;i<l;i++)
{
if(s2.options[i].selected==true)
{
s2.options.remove(i);
s2.length=l-1;
j=1;
break;
}
}
if(j==0)
{
alert(‘请选择你要删除的选项’);
}
return false;
}
</script>
代码下载地址:http://www.aspbc.com/code/showcode.asp?id=96