<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select下拉列表框进行多选、移除、交换内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="font-size:12px">
<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 οndblclick="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,'左')">右移</a><br>
<a href="javascript:selectMove(document.form1.added_role,document.form1.notadded_role,'右')">左移</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 οndblclick="selectMove(document.form1.added_role,document.form1.notadded_role,'右')" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>