本文提供了一个使用HTML和JavaScript实现的选择器示例，通过双列表的方式让用户从可选项中选择并移动到已选项中，同时提供了添加、删除及全选的功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
<!--
function selectInda(sele_id,add_id)
{
var frm = document.getElementById(sele_id);
var bjm = document.getElementById(add_id);
var oi = bjm.options.length
if(frm.value!="")
{
if(oi==0)
{
bjm.options[oi] = new Option(frm.options[frm.selectedIndex].text,frm.value);
}
else if(oi==1)
{
if(bjm.options[oi-1].value!=frm.value) {
bjm.options[oi] = new Option(frm.options[frm.selectedIndex].text,frm.value);
}
}
else if(oi>1)
{
var sign=0;
for(var a=0;a<oi;a++) {
if(frm.value==bjm.options[a].value) {sign = sign+1;}
}
if(sign==0) {
bjm.options[oi] = new Option(frm.options[frm.selectedIndex].text,frm.value);
}
}
}
}
function deleteIndex(dele_id)
{
var frm = document.getElementById(dele_id);
var fln = frm.options.length;
if(frm.value!="")
{
frm.options.removeChild(frm.options[frm.selectedIndex]);
}
}
function subIndex(subid, questid)
{
var Sobj = document.getElementById(subid);
var Qobj = document.getElementById(questid);
if(Sobj.options.length!=0)
{
Qobj.value = "";
for(var b=0;b<Sobj.options.length;b++)
{
if(b!=0) {Qobj.value += "," + Sobj.options[b].value;}
else {Qobj.value += Sobj.options[b].value;}
}
}
else
{
Qobj.value = "";
}
}
//-->
</script>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="2" bgcolor="#CCCCCC">
<tr>
<td> </td>
<td><table width="500" border="0" align="center" cellpadding="0" cellspacing="0" id="groupgoods-table" style="display:">
<tr>
<th height="25" bgcolor="#CCCCCC">可选</th>
<th bgcolor="#CCCCCC">操作</th>
<th bgcolor="#CCCCCC">已选</th>
</tr>
<tr>
<td width="42%"><select name="about_select1" size="20" id="about_select1" style="width:100%" ondblclick="selectInda('about_select1','about_option1');subIndex('about_option1', 'about_fitg');">
<option value="1">linghunts@163.com</option>
<option value="2">huangxl@chinaok.com.cn</option>
<option value="3">a8235145@163.com</option>
<option value="4">ahuangyo@sina.com</option>
<option value="5">linghunbaobei@163.com</option>
</select></td>
<td align="center"><p>
<input name="left_add1" type="button" class="button" id="left_add1" value="添加>" onclick="selectInda('about_select1','about_option1');subIndex('about_option1', 'about_fitg');" />
</p>
<p>
<input name="right_del1" type="button" class="button" id="right_del1" value="<删除" onclick="deleteIndex('about_option1');subIndex('about_option1', 'about_fitg');" />
</p>
<p>
<input name="right_delall" type="button" class="button" id="right_delall" value="<<" onclick="document.getElementById('about_option1').options.length=0;document.getElementById('about_fitg').value='';" />
</p></td>
<td width="42%"><select name="about_option1" size="20" multiple="multiple" id="about_option1" style="width:100%" ondblclick="deleteIndex('about_option1');subIndex('about_option1', 'about_fitg');">
</select>
<input name="about_fitg" id="about_fitg" type="hidden" value="" /></td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
