在软件里面实现双向列表选择非常常见，本脚本演示了使用JavaScript实现双向列表选择，功能简单实用
在网页<head>区添加以下代码
<script language="javascript">
function MoveSingleItem(sel_source, sel_dest)
{
if (sel_source.selectedIndex==-1) //源：没有点选任何项目
return;
if (sel_source.options[0].text=="无") //源：只有“无”项目
return;
if (sel_dest.options[0].text=="无") //目标：只有“无”项目，则先删除该提示性项目
sel_dest.options.remove(0);
var SelectedText = sel_source.options[sel_source.selectedIndex].text;
var SelectedVal = sel_source.options[sel_source.selectedIndex].value;
var newOption = new Option(SelectedText);
newOption.value = SelectedVal;
sel_dest.options.add(newOption);
//sel_dest.options.add(new Option(SelectedValue));
sel_source.options.remove(sel_source.selectedIndex);
if (sel_source.options.length==0) //源：如果删除完所有有用项目，则添加提示项目：“无”
sel_source.options.add(new Option("无"));
}
function MoveAllItems(sel_source, sel_dest)
{
if (sel_source.options[0].text=="无") //源：只有“无”项目
return;
if (sel_dest.options[0].text=="无") //目标：只有“无”项目，则先删除该提示性项目
sel_dest.options.remove(0);
//首先拷贝所有项目到目标：
var sel_source_len = sel_source.length;
for (var j=0; j<sel_source_len; j++)
{
var SelectedText = sel_source.options[j].text;
var SelectedVal = sel_source.options[j].value;
var newOption = new Option(SelectedText);
newOption.value = SelectedVal;
sel_dest.options.add(newOption);
}
//然后删除“源”所有项目：
while ((k=sel_source.length-1)>=0)
{
if (sel_source.options[0].text=="无") //源：只有“无”项目
break;
sel_source.options.remove(k);
if (sel_source.options.length==0) //源：如果删除完所有有用项目，则添加提示项目：“无”
sel_source.options.add(new Option("无"));
}
}
function Submit(frm)
{
if (frm.SelectedItem.options[0].text!="无")
SelectAll(frm.SelectedItem);
frm.submit();
}
function SelectAll(theSel) //选中select中全部项目
{ for (i=0; i<theSel.length; i++)
theSel.options[i].selected = true;
}
</script>
在网页<body>区添加以下代码
<form id="frm" name="frm" method="post" action="" onSubmit="Submit(this)">
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="220" align=center valign="top">
待分配的角色：<br><br>
<select name="WaitSelectItem" id="WaitSelectItem" size=15 multiple="true" style="width:180px;">
<option value="">待分配的角色-1</option>
<option value="">待分配的角色-2</option>
<option value="">待分配的角色-3</option>
<option value="">待分配的角色-4</option>
<option value="">待分配的角色-5</option>
<option value="">待分配的角色-6</option>
</select>
</td>
<td width="60" align=center>
<button onClick="MoveSingleItem(WaitSelectItem, SelectedItem)" style="width:40px;">></button><br><br>
<button onClick="MoveAllItems(WaitSelectItem, SelectedItem)" style="width:40px;">>></button><br><br>
<button onClick="MoveSingleItem(SelectedItem, WaitSelectItem)" style="width:40px;"><</button><br><br>
<button onClick="MoveAllItems(SelectedItem, WaitSelectItem)" style="width:40px;"><<</button><br><br>
</td>
<td width="220" align=center valign="top">
已分配的角色：<br><br>
<select name="SelectedItem[]" id="SelectedItem" size=15 multiple=true style="width:180px;">
<option value="">无</option>
</select>
</td>
</tr>
<tr height=120>
<td colspan=3 align=center>
<input type="submit" id="submit" name="submit" value=" 保存 ">
<button onClick="history.go(-1);"> 返回 </button>
</td>
</tr>
</table>
</form>
