原文：http://yqling2008.iteye.com/blog/973977
一、Javascript 实现多选 select 的增加与移除效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select下拉列表框进行多选、移除、交换内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="font-size:12px">
<form name="form1" method="post" action="">
<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="150"><table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
<tr>
<td height="25" background="/jscss/demoimg/200908/selectbg.jpg" bgcolor="#FFFFFF"> 请选择：</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><select name="sel_place1" size="6" multiple id="sel_place1" style="width:100px " >
<option value="sel1">江苏省</option>
<option value="sel2">广东省</option>
<option value="sel3">河南省</option>
<option value="sel4">吉林省</option>
<option value="sel5">浙江省</option>
</select></td>
</tr>
</table></td>
<td width="80" align="center" valign="bottom"><input name="sure1" type="button" id="sure1"
onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);" value="<<">
<input name="sure2" type="button" id="sure2"
onClick="allsel(document.form1.sel_place1,document.form1.sel_place2);" value=">>" align="center" height="2"></td>
<td width="150"><table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
<tr>
<td height="25" background="/jscss/demoimg/200908/selectbg.jpg" bgcolor="#FFFFFF"> 已选择：</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><select name="sel_place2" size="6" multiple id="sel_place2" style="width:100px ">
</select></td>
</tr>
</table></td>
</tr>
</table>
</form>
<script language="javascript">
function allsel(n1,n2)
{
while(n1.selectedIndex!=-1)
{
var indx=n1.selectedIndex;
var t=n1.options[indx].text;
n2.options.add(new Option(t));
n1.remove(indx);
}
}
</script>
</body>
</html>
二、JQuery 实现多选 select 的增加与移除效果
<!-- Author==>> Henry -->
<!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=gbk" />
<title>JQuery操作select</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script language="javascript">
// select 中的 onchange()事件
function selectChange() {
$("#add").attr("disabled",false); // 首先将添加按钮设为可用
var selectObject = $("#myselect").val(); // 取得左侧所选取的值
$("#myresult").find("option").each(function(){ // 以 option 为参数 查询 右侧所有的可选项并逐一遍历
if($(this).val() == selectObject){ // 判断左侧中选择的项在右侧中是否已经存在
$("#add").attr("disabled",true); // 如果上面的判断存在则将添加按钮设为不可用, 禁止重复添加
}
});
}
// 左侧增加到右侧
function toAdd() {
var selectObject = $("#myselect").val(); // 取得左侧所选取的值
if (null==selectObject) {
alert("请选择要添加的内容!");
return false;
}
var content = "<option value='"+selectObject+"'>"+selectObject+"</option>"; // 填充右侧的值
$("#myresult").append(content);
//$("#myselect option:selected").remove(); // 删除左侧所选的值
selectChange(); // 最后调用 selectChange()模拟onChange()事件, 主要是为了能够及时地将禁用的添加按钮重新激活(如果有必要)
}
// 右侧移除
function toRemove() {
var removeObject = $("#myresult option:selected").val(); // 取得右侧要移除的内容, 注意可多选
if (null==removeObject) {
alert("请选择要删除的名字!");
return false;
}
$("#myresult option:selected").remove();
selectChange(); // 与toAdd()中调用原理一致
}
</script>
</head>
<body>
<p style="color:#F60; size:auto">Author: Henry</p>
姓名:
<select style="width:100px" id="myselect" size="5" οnchange="selectChange()">
<option value="Henry">Henry</option>
<option value="Aaron">Aaron</option>
<option value="Gang">Gang</option>
</select>
<input id="add" name="add" type="button" value="添加" οnclick="toAdd()"/>
<select style="width:100px" size="5" multiple id="myresult">
</select>
<input id="del" name="del" type="button" value="移除" οnclick="toRemove()"/>
</body>
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
