Javascript、JQuery 实现多选 select 的增加与移除效果

转自: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="<<">
  &nbsp;
  <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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值