做项目的时候要用到的一个小功能，用的纯JS，很实用，该功能很常见，其实就是从左边列表的选项进行选择，在右边的文本域里显示选择好的选项。代码如下：
Html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<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 class="tbody" οnlοad="document.frm.GrpName.focus()">
<form name="frm" id="frm" action="/cgi-bin/addr_grp_addedit_html?sid=_3QWaXoa53T1QHg1" target="actionFrame" method="post" οnsubmit="fSelectAllAddress(this)">
<input type="hidden" name="sid" value="_3QWaXoa53T1QHg1" >
<input TYPE="hidden" name="isqqgroup" value="">
<table width="100%" border="0" cellspacing="0" cellpadding="2" class="toolbg">
<input type="hidden" name="t">
<tr>
<td align="left" nowrap class="barspace toolbgline f_family">
<input type="submit" value=" 保存信息 " class="wd2 btn btn_true" /><input type="button" value=" 取消 " class="wd1 btn btn_true" οnclick="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">
<div class="settingtable">
<center>
<div style="width:96%;text-align:left;font:bold 14px Verdana;padding:15px 0 4px 2px" class="addr_line">
新建联系组
</div>
</center>
<table width="96%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td colspan="3" align="left" style="padding:12px 18px 20px 8px;height:40px;">组名：<input type="text" autocomplete="off" class="txt" 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 οndblclick="MoveSelection(document.frm.OutGroup,document.frm.InGroup)">
<option value="14">BOSS <</option>
<option value="6">岩 <464706@qq.com></option>
<option value="62">◇親伱メ尐嘴 <453743@qq.com></option>
<option value="10">日落烟痕 <547269@qq.com></option>
<option value="18">天上人间 <756813@qq.com></option>
<option value="80">为爱守候 <300146@qq.com></option>
<option value="109">无悔 <hq6171081@qq.com></option>
<option value="105">我也非猪油 <348038@qq.com></option>
</select>
</td>
<td align="left" width="60">
<input type="button" class="wd2 btn btn_true" οnclick="MoveSelection(document.frm.OutGroup,document.frm.InGroup)" value=" 添加 › " /><br /><br />
<input type="button" class="wd2 btn btn_true" onClick="MoveSelection(document.frm.InGroup,document.frm.OutGroup)" value=" ‹ 删除 " /><br /><br />
<input type="button" class="wd2 btn btn_true" οnclick="MoveAll(document.frm.OutGroup,document.frm.InGroup)" value="全添加 »" /><br /><br />
<input type="button" class="wd2 btn btn_true" οnclick="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 οndblclick="MoveSelection(document.frm.InGroup,document.frm.OutGroup)">
</select>
</td>
</tr>
<tr><td colspan="3" align="left" height="35" valign="top" class="addrtitle" style="padding-left:8px;">按住Ctrl键可以多选,shift键可选择范围，双击可以直接添加</td></tr>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="2" class="toolbg">
<input type="hidden" name="AddrID" value="">
<input type="hidden" name="t">
<tr>
<td align="left" nowrap class="barspace toolbgline f_family">
<input type="submit" value=" 保存信息 " class="wd2 btn btn_true" /><input type="button" value=" 取消 " class="wd1 btn btn_true" οnclick="javascript:location.href='/cgi-bin/addr_listall?sid=_3QWaXoa53T1QHg1'" />
</td>
</tr>
</table>
</form>
<script language="javascript">
PGV();
</script>
</body>
</html>
扫一扫
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
