javascript制造select列表双向选择

2012-10-18

javascript制作select列表双向选择??做项目的时候要用到的一个小功能，用的纯JS，很实用，该功能很常见，其实

javascript制作select列表双向选择

??做项目的时候要用到的一个小功能，用的纯JS，很实用，该功能很常见，其实就是从左边列表的选项进行选择，在右边的文本域里显示选择好的选项。代码如下：

<title>QQ邮箱 - 编辑联系组</title>
<link rel="stylesheet" type="text/css" href="http://rescdn.qqmail.com/zh_CN/htmledition/style/comm201003a763.css" />
<link rel="stylesheet" type="text/css" href="/cgi-bin/getcss?sid=_3QWaXoa53T1QHg1&ft=skin" />
<style type="text/css">
select {font-family:Arial;}
</style>
<script language="JavaScript" src="http://rescdn.qqmail.com/zh_CN/htmledition/js/all044efa.js"></script>
<script language="javascript">
function MoveAll(FromList,ToList)
{
?for(var i=0;i<FromList.length;i++)
?{
???ToList[ToList.length]=new Option(FromList.options[i].text,FromList.options[i].value);
?}
?FromList.length=0;
};
function MoveSelection(FromList,ToList)
{
?for(var i=0;i<FromList.length;i++)
?{
??if(FromList.options[i].selected)
??{
???ToList[ToList.length]=new Option(FromList.options[i].text,FromList.options[i].value);
??}
?}
?for(i=FromList.length-1;i>=0;i--)
?{
??if(FromList.options[i].selected)FromList.remove(i);
?}
};
function fSelectAllAddress(frm)
{
?for(i=0;i<frm.InGroup.length;i++)
?{
??frm.InGroup.options[i].selected=true;
?}
};
</script>
</head>
<body onload="document.frm.GrpName.focus()">
<form name="frm" id="frm" action="/cgi-bin/addr_grp_addedit_html?sid=_3QWaXoa53T1QHg1" target="actionFrame" method="post" onsubmit="fSelectAllAddress(this)">
<input type="hidden" name="sid" value="_3QWaXoa53T1QHg1" ><table width="100%" border="0" cellspacing="0" cellpadding="2" name="t">
?<tr>
??<td align="left" nowrap value=" 保存信息 " /><input type="button" value=" 取消 " onclick="javascript:location.href='/cgi-bin/addr_listall?sid=_3QWaXoa53T1QHg1'" />
??</td>
?</tr>
</table>
<input TYPE="hidden" name="OperType" value="ADD">
<input TYPE="hidden" name="GrpID" value="0">?<tr>
??<td colspan="3" align="left" style="padding:12px 18px 20px 8px;height:40px;">组名：<input type="text" autocomplete="off" name="GrpName" size="36" value=""? />  <font color="#FF0000">*必填</font></td>
?</tr>
?<tr>
??<td align="left" width="270" style="padding:2px 5px 2px 8px;line-height:20px;">
???可选联系人<br>
???<select name="OutGroup" size="15" style="width:250px;height:250px" multiple ondblclick="MoveSelection(document.frm.OutGroup,document.frm.InGroup)">
?????????<option value="14">BOSS <</option>
??????<option value="6">李宁岩 <464199706@qq.com></option>
??????<option value="62">◇親伱メ尐嘴 <453793743@qq.com></option>
??????<option value="10">日落烟痕 <547225369@qq.com></option>
??????<option value="18">天上人间 <756525813@qq.com></option>
??????<option value="80">为爱守候 <303620146@qq.com></option>
??????<option value="109">无悔 <hq617831081@qq.com></option>
??????<option value="105">我也非猪油 <348186038@qq.com></option>
??????<option value="27">我自己的邮箱 <949162895@qq.com></option>
??????<option value="7">徐平 <501927433@qq.com></option>
??????<option value="16">谢庆福 <736972118@qq.com></option>
??????<option value="13">谢祯仪 <649515878@qq.com></option>
??????<option value="20">余鸿 <821493905@qq.com></option>
??????<option value="11">曾建欣 <593951090@qq.com></option>
??????<option value="423">张鹏 <912315738@qq.com></option>
??????<option value="12">钟秋霞 <596251288@qq.com></option>
??????<option value="213">136216843 <136216843@qq.com></option>
??????<option value="309">2个人 <511032797@qq.com></option>
??????<option value="233">472243722 <472243722@qq.com></option>
??????<option value="108">617831081 <617831081@qq.com></option>
??????<option value="107">731768642 <731768642@qq.com></option>
??????<option value="234">963925022 <963925022@qq.com></option>
?????????</select>??
??</td>
??<td align="left" width="60">
???<input type="button" onclick="MoveSelection(document.frm.OutGroup,document.frm.InGroup)" value=" 添加 › " /><br /><br />
???<input type="button" onClick="MoveSelection(document.frm.InGroup,document.frm.OutGroup)" value=" ‹ 删除 " /><br /><br />
???<input type="button" onclick="MoveAll(document.frm.OutGroup,document.frm.InGroup)"? value="全添加 »" /><br /><br />
???<input type="button" onclick="MoveAll(document.frm.InGroup,document.frm.OutGroup)" value="« 全删除" /><br />
??</td>
??<td align="left" style="padding:2px 10px 2px 20px;line-height:20px;">
???已有联系人<br>
???<select name="InGroup" size="15" style="width:250px;height:250px" multiple ondblclick="MoveSelection(document.frm.InGroup,document.frm.OutGroup)">
????????????</select>
??</td>
?</tr>
?<tr><td colspan="3" align="left" height="35" valign="top" style="padding-left:8px;">按住Ctrl键可以多选,shift键可选择范围，双击可以直接添加</td></tr>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="2" name="AddrID" value="">
?<input type="hidden" name="t">
?<tr>
??<td align="left" nowrap value=" 保存信息 " /><input type="button" value=" 取消 " onclick="javascript:location.href='/cgi-bin/addr_listall?sid=_3QWaXoa53T1QHg1'" />
??</td>
?</tr>
</table>
</form>
<script language="javascript">
?PGV();
</script>
</body>
</html>?

热点排行