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

最新推荐文章于 2022-04-07 08:40:02 发布
最新推荐文章于 2022-04-07 08:40:02 发布
阅读量969 收藏
点赞数
分类专栏： Web前端开发

转自：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>


shanliangliuxing
关注
专栏目录
jQueryMultipleSelect实现下拉框多选
12-27
jQuery Multiple Select实现下拉框多选，请注意是Multiple 。实例介绍详细，想用的可以直接Copy进去用
jquery下拉多选select插件.rar
05-07
本资源"jquery下拉多选select插件.rar"提供了一个基于jQuery实现的多选下拉框插件，适用于J2EE开发环境，尤其适合那些希望在网页中创建美观且功能强大的下拉选择器的开发者。 首先，让我们深入了解一下jQuery的选择...
JQuery Select多选插件实现
weixin_34025151的博客
05-09 206
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery下拉框多选插件可删除
ICode联盟
04-07 330
下载地址 Select下拉框样式，特别的是这个下拉选择可以选择多个下拉选项，而且可以删除，可以设置无限数量的选择。 dd:
jq多选加文件预览_jQuery 多选列表框(multiple select)示例
weixin_35679132的博客
02-26 317
参照《锋利的jquery》这本书的例子敲的代码，在项目中的应用是根据这例子来改造的，在此作一下笔记。效果图，如下：js代码：复制代码 代码示例:$(document).ready(function(){$('#add').click(function(){var $options = $('#select1 option:selected');//获取当前选中的项var $remove = $op...
基于jquery实现多选下拉列表
10-19
这个例子不仅演示了如何使用jQuery来操作DOM元素，还展示了如何通过事件监听来实现动态的交互效果。这类功能在现代Web应用程序中非常常见，使用jQuery可以相对容易地实现复杂的用户界面交互。 总结来说，基于jQuery...
Jquery遍历select option和添加移除option的实现方法
10-21
在这篇文章中，我们将了解到如何使用JQuery来遍历select中的option，并实现添加和移除option的几种方法。 首先，我们来看一下如何遍历select中的option元素。在JQuery中，可以使用选择器来选中一个select元素，然后...
用jQuery实现可输入多选下拉组合框实例代码
10-20
在介绍如何使用jQuery实现一个可输入的多选下拉组合框的实例代码时，我们需要了解以下知识点： 1. **jQuery的基础知识：** jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过一种简洁的方式，改变了...
两个select 多选 移入移出
zz_xyz的博客
10-10 245
效果： [img]http://dl2.iteye.com/upload/attachment/0127/3092/7ee85c78-e4b8-3a55-9065-629ec964d3e4.png[/img] 工号选择： 测试2 测试3 测试4 测试5 ...
Jquery下拉多选
03-26
NULL 博文链接：https://fengxiaokai.iteye.com/blog/1166850
Jquery多选框多选功能快速实现
Marinda_Speed的博客
03-21 1050
Jquery多选框多选功能快速实现
html select 多选效果,HTML <select> 标签 创建单选或多选菜单
weixin_32515349的博客
06-03 319
app 要求字体使用楷体，使用字体包1,下载字体包 http://www.3987.com/xiazai/6/fonts/36616.html#down 2. studio中src\main\创建assets\fonts,存放 ...Redis 一二事 - 在spring中使用jedis 连接调试单机redis以及集群redisRedis真是好,其中的键值用起来真心强大啊有木有, 之前的...
js操作select（添加、移除、获取select值）
weixin_33674976的博客
05-22 188
js操作select（添加、移除、获取select值），很实用。如图：代码如下：<html> <html> <TITLE>选择下拉菜单</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META N...
select下拉框实现多选功能
热门推荐
weixin_42442123的博客
11-05 4万+
&lt;select id="all"&gt; &lt;option&gt;牡丹&lt;/option&gt; &lt;option&gt;向日葵&lt;/option&gt; &lt;option&gt;薰衣草&lt;/option&gt; &lt;option&gt;雏菊&lt;/op
简单实现select多选功能
qq_30908729的博客
03-29 1256
实现select按ctrl或shift键多选功能 解决方法： <select id="select" style="min-width:250px; height:250px;" multiple=""> <option value="74-0-0">网站模板</option> <option value="74-120-0"> ...
js checked
小画家
08-10 619
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <style> .fs-wrap { position: relative; display: inline-block; width: 200px; font-size: 12px; line-height: 1; } .fs-label-wrap { position: rela..
jquery Select 实现搜索以及checkbox多选
I am your sun ❤
05-04 2788
演示:点击打开链接&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;meta name=
jquery操作select(增加，删除，清空)
岁月如歌去，十年弹指间
11-06 2102
jquery操作select(增加，删除，清空)     1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的 3. var che...
jQuery下拉框多选菜单插件的实现与应用
资源摘要信息: "jQuery实现的select下拉框多选菜单效果插件.zip" ### jQuery基础知识 jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互的过程。通过使用jQuery，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值