`
renjie120
  • 浏览: 237884 次
  • 性别: Icon_minigender_1
  • 来自: 上海
博客专栏
D11bba82-ec4a-3d31-a3c0-c51130c62f1c
Java应用集锦
浏览量:22941
社区版块
存档分类
最新评论

jquery写的一个两个下拉菜单传值的小插件,含demo

阅读更多

转载请注明出处:http://renjie120.iteye.com/



 无聊的很,就看了一下以前的经常写的这个小玩意.使用jquery插件的方式完成了代码.

以前写的表格树,因为太多代码了,重构几乎不可能了,所以这次写这个小玩意的时候完全是使用了jquery插件的开发方式.

 

源码如下:

(function($){
	var docloaded = false;
	$(document).ready(function () {docloaded = true} );
	$.fn.doubleSelect = function(c){
		if (!docloaded)
		{
			$(document).ready
			(
				function ()
				{
				$.addDoubleSelect(c);
				}
			);
		} else {			
			$.addDoubleSelect(c);
		}
	}
	$.addDoubleSelect=function(c){
		c=$.extend({
			height:'100px',
			width:'100px',
			left:null,
			right:null,
			addBtn:null,
			removeBtn:null,
			addAllBtn:null,
			removeAllBtn:null,
			noAdd:'请选择要添加的项目',
			noRemove:'请选择要移除的项目',
			option:'2'
		},c);

		var dbs = {
			init:function(){
				dbs.lbtn.click(this.add);
				dbs.rbtn.click(this.remove);
				dbs.l.dblclick(this.add).height(c.height).width(c.width);
				dbs.r.dblclick(this.remove).height(c.height).width(c.width);
				dbs.alAdBtn.click(this.addAll);
				dbs.alRmBtn.click(this.rmAll);
			},
			addAll:function(){
				dbs.addall(dbs.l,dbs.r);
			},
			rmAll:function(){
				dbs.rmall(dbs.r,dbs.l);
			},
			add:function(){
				if($('option:selected',dbs.l).size()<1){
					 alert(c.noAdd);
					 return;
				}	  		
				dbs.mv(dbs.l,dbs.r);
			},
			remove:function(){
				if($('option:selected',dbs.r).size()<1){
					 alert(c.noRemove);
					 return;
				 }	  
				 if(c.option=='1')
					 $('option:selected',dbs.r).remove();
			     else{
					dbs.mv(dbs.r,dbs.l);
				 }
			},
			addall:function(a,b){
				$('option',a).each(function(){
					if($('option[value='+this.value+']',b).size()<1){
						b.append(["<option value='",this.value,"'>",this.text,"</option>"].join(''));
					}
					if(c.option=='2')
						$(this).remove();
				});
			},
			rmall:function(a,b){
				$('option',a).each(function(){
					if($('option[value='+this.value+']',b).size()<1){
						b.append(["<option value='",this.value,"'>",this.text,"</option>"].join(''));
					}
					$(this).remove();
				});
			},
			mv:function(a,b){
				 $('option:selected',a).each(function(){	  			
					if($('option[value='+this.value+']',b).size()<1){
						b.append(["<option value='",this.value,"'>",this.text,"</option>"].join(''));
					}
					if(c.option=='1')
						this.selected = false;
					else{
						$(this).remove();
					}
				});
			}
		};
		dbs.l = $('#'+c.left);
		dbs.r =  $('#'+c.right);
		dbs.lbtn = $('#'+c.addBtn);
		dbs.rbtn =  $('#'+c.removeBtn);
		dbs.alAdBtn = $('#'+c.addAllBtn);
		dbs.alRmBtn = $('#'+c.removeAllBtn);
		dbs.init();
	};
})(jQuery);

 测试页面:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dblSelect.js"></script>
<script type="text/javascript">
$(function() {
	//设置按钮宽度
	$('button').width('50px');
	//使用双下拉菜单插件
	$(document).doubleSelect({
		left:'l',//左边的下拉菜单的id
		right:'r',//右边下拉菜单的id
		width:'150px',//下拉菜单宽度
		height:'200px',//高度
		addBtn:'add',//添加按钮id
		removeBtn:'remove',//删除按钮id
		addAllBtn:'addAll',//添加全部按钮id
		removeAllBtn:'removeAll',//删除全部按钮id
		noAdd:'没有选择要添加的item!',
		noRemove:'没有选择要删除的item!',
		option:'2'//有1,2两种模式,一种(option='1')是左边移除到右边左边不会减少,另外一种会减少(option=2,默认)!
	});
});	
</script>
</head>
<body>
<table><tr><td>
<SELECT id="l" style="width:100px;" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</SELECT></td>
<td><button id='add'>添加</button><br><button id="remove">删除</button><br>
<button id='addAll'>全添加</button><br><button id="removeAll">全删除</button></td>
<td>
<SELECT id="r" style="width:100px;" multiple="multiple">
</SELECT></td></tr></table>
1.支持双击select添加,或者移除<br>
2.提供两种模式的下拉菜单的选择,通过option设置
</body>
</html>

 

  • 大小: 7.9 KB
1
0
分享到:
评论

相关推荐

    JQuery下拉菜单插件

    jQuery,一个轻量级、高性能的JavaScript库,提供了丰富的API和插件来帮助开发者创建功能强大的下拉菜单。本文将深入探讨jQuery下拉菜单插件的原理和实现方法,并结合提供的文件`jquery.tzSelect.zip`进行实例分析。...

    jQuery多级下拉菜单支持多级下拉列表菜单.zip

    这段代码使用了jQuery的`hover`方法,它接受两个参数,分别对应`mouseenter`和`mouseleave`事件的回调函数。`slideToggle`和`slideUp`是jQuery的动画方法,用于平滑地改变元素的高度,从而实现展开和收起的效果。 ...

    div模拟下拉菜单(select)jquery插件.gz

    在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先,`demo.html`是演示页面,它展示了如何在实际项目中应用这个插件。这个页面会包含一...

    jQuery下拉菜单表单美化插件

    Image DropDown的核心功能在于它能够为每个下拉菜单选项添加小图标,这使得菜单变得更加直观,用户可以通过图标快速识别出各个选项的含义。例如,对于一个包含多种操作(如保存、删除、编辑)的下拉菜单,可以分别...

    jQuery多功能搜索框插件下拉菜单选择代码

    综上所述,"jQuery多功能搜索框插件下拉菜单选择代码"是一个实用且灵活的前端组件,它结合了jQuery的便利性和Bootstrap的美学,为用户提供了一个高效、直观的搜索体验。通过学习和理解这个项目,开发者不仅可以掌握...

    jQuery大型下拉菜单插件booNavigation

    "jQuery大型下拉菜单插件booNavigation"就是这样一个工具,专为创建高效且具有视觉吸引力的下拉菜单而设计。这款插件基于JavaScript库jQuery,简化了开发过程,使得即使是对前端编程不太熟悉的开发者也能轻松实现...

    jQuery和CSS3超酷二级下拉菜单特效插件

    本文将深入探讨一款基于jQuery和CSS3的超酷二级下拉菜单特效插件,这款插件能够为您的网站增添动态效果,提升用户界面的吸引力。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理...

    24、Jquery纯CSS3制作华丽网站下拉菜单

    通过以上步骤,我们就可以创建一个既美观又实用的jQuery CSS3下拉菜单。这种方法的优点在于,它允许开发者在不牺牲性能的前提下,创造出吸引人的动态效果。同时,由于主要依赖CSS3,所以该方法在现代浏览器中有着很...

    用jQuery写的多方式下拉菜单,可含图文.zip

    通过以上步骤,我们就成功地创建了一个具备多种展现方式、图文并茂的jQuery下拉菜单。在实际项目中,还可以根据需求进一步优化,如添加过渡动画、触发动画等,提升用户交互体验。记住,jQuery提供的强大工具和丰富的...

    一个jquery的下拉菜单插件自己写的

    一个jquery的下拉菜单插件自己写的jquery下拉菜 Dropdown Jquery1.32

    下拉菜单-JQUERY

    在网页设计中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,使得动态交互效果的实现变得更为便捷。本文将深入探讨如何利用jQuery来创建功能丰富的下拉菜单。 一、jQuery简介 jQuery是由...

    商城网站多级下拉菜单,jquery插件版.rar

    【标题】"商城网站多级下拉菜单,jquery插件版.rar" 描述了一个用于创建类似于京东、淘宝等大型电商网站的多级下拉导航菜单的jQuery插件。这种插件是网页设计中的一个重要组成部分,它能有效地组织大量分类商品,...

    两款jquery下拉导航菜单支持多级的下拉导航菜单代码

    本资源包含两款支持多级下拉的jQuery导航菜单代码,非常适合需要构建层级结构清晰、响应式的网站。 首先,我们来看第一款jQuery下拉导航菜单。这款菜单利用了jQuery的事件监听和DOM操作功能,实现了鼠标悬停时展开...

    JQuery写的日期级联下拉菜单

    这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户界面组件,允许用户通过三个连续的下拉列表分别选择年、月和日。这种设计使得用户能够快速、准确地输入日期,同时保持页面的简洁性...

    可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo

    Mutiselect是一个流行的jQuery插件,它提供了美观的多选下拉效果。它可能包含了自定义样式、搜索过滤、分页等功能,使得用户在大量选项中更容易找到并选择所需项。 5. **JqueryMultiselect2017**: 这可能是另一...

    jQuery自适应横排下拉菜单导航代码

    "jQuery自适应横排下拉菜单导航代码"提供了一个高效且美观的解决方案,尤其适合那些希望提升用户体验的开发者。这个代码利用jQuery库实现,能够根据屏幕尺寸自动调整布局,确保在各种设备上都能良好地展示。 首先,...

    jquery日期控件(有下拉菜单选择年份)

    标题中的“jquery日期控件(有下拉菜单选择年份)”指的是这个定制的jQuery插件,它改进了原有的日期输入功能,特别是年份的选择方式。传统的日期控件通常通过弹出日历或者点击按钮逐个选择年份,这种方式可能会让...

    jquery插件的无限极下拉菜单

    要创建一个jQuery无限级下拉菜单,首先确保引入了jQuery库。你可以从jQuery官方网站下载,或者通过CDN(内容分发网络)链接来引入: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;...

    jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表

    jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表

    jquery鼠标滑过显示二级下拉菜单代码

    这段代码使用了jQuery的`hover`方法,它接受两个函数参数,分别对应鼠标进入和离开时的回调。`stop(true, true)`用于停止当前动画并立即跳转到最后的状态,`fadeIn`和`fadeOut`则用于平滑地显示和隐藏子菜单。 综上...

Global site tag (gtag.js) - Google Analytics