jquery之双下拉框

最新推荐文章于 2021-03-30 11:30:40 发布
最新推荐文章于 2021-03-30 11:30:40 发布
阅读量452 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fish_whale/article/details/82893096
版权

仿照doublebox-boostrap的功能写的一个双边栏选择框，主要实现：左右互移，模糊查询

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>jquery之双下拉框</title>
		<style type="text/css">
			.select1 {
				width: 200px;
				min-height: 150px;
				display: block;
			}
			
			.select2 {
				width: 200px;
				min-height: 150px;
				display: block;
			}
			
			.btn {
				margin: auto 10px;
			}
			
			.btn button {
				display: block;
				margin-top: 10px;
			}
			
			.doubleBox {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 120px;
			}
			
			.doubleInput {
				width: 200px;
				height: 24px;
				outline: none;
				border-radius: 4px;
				margin-bottom: 10px;
				border: 1px solid #ddd;
			}
			
			.hide {
				display: none;
			}
			
			.show {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="doubleBox">
			<div class="leftBox">
				<input type="text" class="leftInput doubleInput" />
				<select class="select1" multiple="multiple">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
					<option>6</option>
					<option>7</option>
				</select>
			</div>

			<div class="btn">
				<button class="btn_add">右移>></button>
				<button class="btn_delete"><<左移</button>
			</div>

			<div class="rightBox">
				<input type="text" class="rightInput doubleInput" />
				<select class="select2" multiple="multiple">
					<option>8</option>
					<option>9</option>
					<option>10</option>
					<option>11</option>
					<option>12</option>
					<option>13</option>
					<option>14</option>
				</select>
			</div>

		</div>

		<script src="js/jquery.js"></script>
		<script>
			$(function() {
				//左侧查询
				$(".leftInput").keyup(function() {
					var serachInput = $(".leftInput").val();
					var selectOption = $(".select1").find('option');
					$(".select1>option").attr("disabled", false);
					if(serachInput == '') {
						$(selectOption).addClass('show');
						for(var i = 0; i < selectOption.length; i++) {
							if($(selectOption[i]).attr('data-sec') == 'hide') {
								//隐藏属于右侧的
								$(selectOption[i]).addClass('hide');
								$(selectOption[i]).removeClass('show');
							}
						}
						return;
					}
					//如果填了，先将所有的选项隐藏
					$(selectOption).addClass('hide');
					$(selectOption).removeClass('show');

					for(var i = 0; i < selectOption.length; i++) {
						//如果属于左侧
						if($(selectOption[i]).attr('data-sec') != 'hide') {
							//模糊匹配，将所有匹配项显示
							if(selectOption.eq(i).text().indexOf(serachInput) != -1) {
								selectOption.eq(i).addClass('show');
							}
						} else {
							//隐藏属于右侧的
							$(selectOption[i]).addClass('hide');
							$(selectOption[i]).removeClass('show');
						}

					}
				});
				//右侧查询
				$(".rightInput").keyup(function() {
					var serachInput = $(".rightInput").val();
					var selectOption = $(".select2").find('option');
					if(serachInput == '') {
						$(selectOption).addClass('show');
						return;
					}
					//如果填了，先将所有的选项隐藏
					$(selectOption).addClass('hide');
					$(selectOption).removeClass('show');

					for(var i = 0; i < selectOption.length; i++) {
						//模糊匹配，将所有匹配项显示
						if(selectOption.eq(i).text().indexOf(serachInput) != -1) {
							selectOption.eq(i).addClass('show');
						}
						//模糊匹配，只匹配第一位，将所有匹配项显示
//						if(selectOption.eq(i).text().substr(0, serachInput.length) == serachInput) {
//							selectOption.eq(i).addClass('show');
//						}
						
					}
					//			                精确匹配
					//					for(var j = 0; j < selectOption.length; j++) {
					//						if(serachInput == selectOption[j].value) {
					//							$(selectOption[j]).siblings().addClass('hide');
					//							$(selectOption[j]).addClass('show');
					//						} else {
					//							$(selectOption[j]).addClass('hide');
					//							$(selectOption[j]).removeClass('show');
					//						}
					//
					//					}
				});
				//右移
				$(".btn_add").on("click", function() {
					$(".select1 option:selected").clone().appendTo(".select2");
					$(".select1 option:selected").removeClass("show");
					$(".select1 option:selected").addClass("hide");
					$(".select1 option:selected").attr('data-sec', 'hide');
				});
				//左移
				$(".btn_delete").on("click", function() {
					//获取右侧所有选中的option
					var selectedItem = $(".select2").find('option:selected');
					//获取左侧所有option
					var leftOption = $(".select1").find('option');
					//遍历2个select下的option的值，进行匹配
					for(var i = 0; i < selectedItem.length; i++) {
						for(var j = 0; j < leftOption.length; j++) {
							if(selectedItem[i].value == leftOption[j].value) {
								$(leftOption[j]).addClass("show");
								$(leftOption[j]).attr('data-sec', '');
								$(selectedItem[i]).remove();
							} else {
								$(".select2 option:selected").appendTo(".select1");
							}
						}

					}

				});
			})
		</script>
	</body>

</html>

 

fish_whale
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap doublebox查询穿梭框.rar
03-30
带查询的穿梭框，兼容ie8+、火狐、谷歌等浏览器
jquery实现选项在两个下拉列表之间选择性移动的功能
xiaobozhu的博客
08-18 3772
jquery实现选项在两个下拉列表之间选择性移动的功能 jquery的强大是不言而喻的，你可以发挥自己创意的大脑，编写出各种各样奇妙的效果，下面是两个下拉列表，这里面的选项可以在两者之间通过按钮选择，进行移动，这也是一个很实用的功能，在你的网页中不妨设计一个看看效果。 选择移动 BODY {          font-size:12px;        ma
双下拉框的用法
thigh_d的博客
08-03 347
双下拉框的用法 通过改变一个下拉框的数据，另一个下拉框也跟着改变数据。 实现原理 通过双向数据绑定v-model绑定值，然后在使用v-for循环遍历下拉框数据
jQuery之双下拉框
07-12 98
双下拉框要实现的效果，实际上就是左边下拉选择框里的内容，可以添加到右边，而右边同理。写了个简单的例子，来说明一下. 代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 ...
[js学习笔记]城市选择控件（双下拉框选择不同城市列表）
天堂向左
11-16 6557
用JS实现下拉框选择城市的效果
jQuery下拉列表框双向选择
11-11
jQuery下拉列表框双向选择 jQuery下拉列表框双向选择 jQuery下拉列表框双向选择 jQuery下拉列表框双向选择 jQuery下拉列表框双向选择
下拉框左右选择
06-01
双列表下拉框可以左右选择，可以单个选择，可以多个选择
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
10-23
主要介绍了自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框 的相关资料,需要的朋友可以参考下
Angularjs实现带查找筛选功能的select下拉框示例代码
11-25
所以为优化用户体验，带查找功能的下拉框是非常非常有必要的。都知道jquery里有这样的插件，但我们用的是Angularjs,更希望用双向绑定，指令的方式优雅地解决这个问题。 分析 我们的目标是在原来的<select ng-...
bootstrap doublebox带查询的穿梭框
qq_36254571的博客
03-30 1671
1.首先看效果图 我们的需求是带查询的穿梭框，试过layui的穿梭框兼容性(ie8)不是太好，现用bootstrap的穿梭框，效果不错 选择完之后在父页面回显 2.代码实现 父页面点击选择专家的时候方法 function chooseExpertNameTemplate(){ var expertId=$("#expertId").val(); var url = "/project/beforeApproval/chooseExpertNameTemplate.jsp?e...
doublebox-bootstrap.js
01-16
这是bootstrap的一个前端插件框架doublebox，用于左右选择器。可以将左边或者右边的来回选择。
双选列表 双下拉列表 双select列表 jquery
iteye_12263的博客
06-17 273
[img]http://hiphotos.baidu.com/gaoxiang9457/pic/item/abad23d58e0dcfb2a044df51.jpg[/img] 双下拉多选列表 //选择功能 function tianjiafn(){ $("#set...
select下拉菜单实现二级联动
生花脱颖的博客
10-25 1万+
**需求：**建立年级、班级两个数据表，获取年级表信息，根据年级，获取相应的班级 效果图： 不完美的地方就是在不选择年级的时候，是不能选择任何班级的。 代码部分 首先是建立两个表的实体 需要注意的就是写注解了。代码就不贴了。 DAO层代码 年级DAO 年级的DAO层没什么代码，就是继承那三个类，具体用到哪个我也不清楚，就直接都继承了。 public interface GraceDAO exte...
二级联动 （两个下拉框的二级联动，和单选按钮与下拉框的二级联动）
weixin_37623470的博客
04-28 8458
1，两个下拉框的二级联动代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JS实现二级联动菜单&lt;/title&gt; &lt;/head&gt; &l
两个下拉框的动态变化
VON
03-10 1790
本来我的一个模块当中，根据条件查询是下拉框里面的值是从数据库取来，事先放好的。 题型里面是单项多选填空等题型，科目里面是全部科目，根据你的选择来进行查询。 师哥让我修改成，选择不同的题型，科目里面是不一样的这样的功能： 首先是要归功于这篇实例的引导： http://www.jb51.net/article/35279.htm  其次，让我对js的用法进一步深刻理解。什么
嵌套下拉列表框
Android人生
09-03 2462
新建一个Android项目，在main.xml中输入如下代码（注意要把我注释去掉，否则会报错）：       android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:orientation="horizontal" >  //组件水平摆放
uni-app中picker下拉列表中遍历双层数组
lhxsirky的博客
07-26 9847
后台数据的结构如下： "productfactors": [ {//产品投保要素 "factortype": "Period",//要素类型 "datatype": "08",//数据类型 "productfactorvalues": [ { //投保要素值列表 "factorvalue": "1Y",//投保要素值计算值 ...
Bootstrap 多级下拉菜单
热门推荐
歪脖先生的博客
03-08 4万+
多级下拉菜单在很多时候，我们可能需要多级下拉菜单。在一个下拉菜单的某个菜单项中，再创建另一个下拉菜单，即可实现多级下拉菜单。只需为下拉菜单的任意 &lt;li&gt; 元素添加 .dropdown-submenu 的类，并在该 &lt;li&gt; 元素下添加 .dropdown-menu 类的列表，就可以为该菜单项添加一个子下拉菜单。如：&lt;div class="dropdown"&gt; ...
jquery鼠标事件下拉框
最新发布
11-15
以下是使用jQuery实现鼠标事件下拉框的示例代码： ```html <!-- HTML结构 --> <div class="dropdown"> <button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 下拉框 </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">选项1</a> <a class="dropdown-item" href="#">选项2</a> <a class="dropdown-item" href="#">选项3</a> </div> </div> ``` ```javascript // JavaScript代码 $(document).ready(function() { // 鼠标经过下拉框按钮时显示下拉框 $('.dropdown-toggle').mouseenter(function() { $(this).next('.dropdown-menu').show(); }); // 鼠标离开下拉框按钮或下拉框时隐藏下拉框 $('.dropdown-toggle, .dropdown-menu').mouseleave(function() { $('.dropdown-menu').hide(); }); }); ``` 上述代码中，我们使用了jQuery的`mouseenter()`和`mouseleave()`方法来实现鼠标经过和离开下拉框按钮时的事件处理。同时，我们使用了jQuery的`show()`和`hide()`方法来显示和隐藏下拉框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值