javascript制造select列表双向选择
日期：2014-05-16 浏览次数：20655 次
javascript制作select列表双向选择
??做项目的时候要用到的一个小功能，用的纯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" 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" >
<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" 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" >
<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" 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">
<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" 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">
<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 ondblclick="MoveSelection(document.frm.OutGroup,document.frm.InGroup)">
?????????<option value="14">BOSS <</option>
??????<option value="6">李宁岩 <464199706@qq.com></option>
??????<option value="62">◇親伱メ尐嘴 &
<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 ondblclick="MoveSelection(document.frm.OutGroup,document.frm.InGroup)">
?????????<option value="14">BOSS <</option>
??????<option value="6">李宁岩 <464199706@qq.com></option>
??????<option value="62">◇親伱メ尐嘴 &
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
