Js制作的双向列表选择框

在一对多选择的Web前端界面中，用双向列表选择框布局是比较直观的。以下是用 Javascript 制作的一个示例，关键代码都有了，已经可以使用。大家可以针对自己的实际需求再进行修改，使其更完善，比如加一个“reset”功能等。

<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;">&gt;</button><br><br>
<button onClick="MoveAllItems(WaitSelectItem, SelectedItem)" style="width:40px;">&gt;&gt;</button><br><br>
<button onClick="MoveSingleItem(SelectedItem, WaitSelectItem)" style="width:40px;">&lt;</button><br><br>
<button onClick="MoveAllItems(SelectedItem, WaitSelectItem)" style="width:40px;">&lt;&lt;</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=" 保存 ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button onClick="history.go(-1);"> 返回 </button>
</td>
</tr>
</table>
</form>

<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>