?一、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" onchange="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="添加" onclick="toAdd()"/>
<select style="width:100px" size="5" multiple id="myresult">
</select>
<input id="del" name="del" type="button" value="移除" onclick="toRemove()"/>
</body>
?