js select
<!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.selected)
mySld=i;
for(i=0;i<mySld.length;i++)
{
oTarget.options.length++;
oTarget.options.text=oSource.options].text;
oTarget.options.value=oSource.options].value;
}
for(i=0;i<mySld.length;i++)
{
for(j=mySld-i;j<oSource.options.length-1;j++)
{
oSource.options.text=oSource.options.text;
oSource.options.value=oSource.options.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.text=oSource.options.text;
oTarget.options.value=oSource.options.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,'左')">右移</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 ondblclick="selectMove(document.form1.added_role,document.form1.notadded_role,'右')" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
页:
[1]