文档章节

jquery联动下拉选项

SkipperD
 SkipperD
发布于 2014/12/11 18:18
字数 968
阅读 197
收藏 15
//联动 js
var ldData = {};
(function(){
	function ld($thisDom, param){
		var defaults = {
			url : "common/area/getAll.jhtml",//获取数据的URL
			dataId : "id",//数据ID
			dataPid : "pid",//数据父ID
			rootPid : 0,//根节点PID
			dataTitle : "请配置dataTitle属性",//显示出来的字符,其中以${title}输出data中的title字段
			showConfig : [],//select参数[{name:"aa",tipTitle:"无值时显示的数据"width:"宽度"},{name:"aa",tipTitle:"无值时显示的数据"width:"宽度"}]
			
			//--以上为必选参数
			valueAttr : "initValue",//初始值属性
			defaultValue : -1,//省默认值
			isDisabled : false,//是否设为不可用
			isReadOnly : false,//是否设为只读
			isChosen : false,//是否增加联想框
			isMultiple : false,//区域是否支持多选
			separator : ";",//开启多选时设置默认值使用的分隔符
			commonChange : function($dom, level){},//联动条触发change事件后额外掉用的方法
			lastChange : function($dom){},//区选择后的回调方法
			initFinish : function(){}//初始化完成以后回调方法
		};
		var opts = $.extend(defaults, param);
		
		//获取宽度
		var width = (Math.round(100/opts.showConfig.length) - 1) + "%";
		
		//获取title字符串
		var getTitle = function(obj, tempStr){
			var res = "";
			var i = 0;
			while(tempStr.indexOf("${", i) >= 0){
				var start = tempStr.indexOf("${", i);
				var end = tempStr.indexOf("}", i);
				if(start > i){
					res += tempStr.substring(i, start);
				}
				var el = tempStr.substring(start + 2, end);
				if(obj[el]){
					res += obj[el];
				}
				i = end + 1;
			}
			return res += tempStr.substring(i);
		}
		
		//构建option的html(dataArray:数据数组,defaultStr:默认文字,current:当先选中的数据ID)
		var buildOption = function(dataArray,defaultStr,current){
			var html = [];
			html.push('<option value="">'+defaultStr+'</option>');
			if(dataArray && $.isArray(dataArray) && dataArray.length > 0){
				for(var i = 0;i < dataArray.length; i++){
//					console.info(getTitle(dataArray[i],opts.dataTitle));
					if(current == dataArray[i][opts.dataId]){
						html.push('<option value="'+dataArray[i][opts.dataId]+'" selected>'+getTitle(dataArray[i],opts.dataTitle)+'</option>');
					}else{
						html.push('<option value="'+dataArray[i][opts.dataId]+'">'+getTitle(dataArray[i],opts.dataTitle)+'</option>');
					}
					
				}
			}
			return html.join(" ");
		}
		
		//通过ID获取数据
		var getObj = function(id){
			if(id != -1){
				for(var i = 0; i < getData().length; i ++){
					if(getData()[i][opts.dataId] == id){
						return getData()[i];
					}
				}
			}
			return undefined;
		}
		
		//通过父ID获取子集
		var getChildren = function(pid){
			var res = [];
			for(var i = 0; i < getData().length; i ++){
				if(getData()[i][opts.dataPid] == pid){
					res.push(getData()[i]);
				}
			}
			return res;
		}
		
		//选择事件方法
		var change = function($dom){
			var value = $dom.val();
			var obj = getObj(value);
			var level = parseInt($dom.attr("level"));
			var isLast = level == undefined || level == opts.showConfig.length - 1;
			if(!isLast){
				for(var i = level + 1; i < opts.showConfig.length; i++){
					$thisDom.find("select")[i].innerHTML = buildOption(undefined, opts.showConfig[i].tipTitle);
				}
				if(obj){
					$thisDom.find("select")[level + 1].innerHTML = buildOption(getChildren(obj[opts.dataId]), opts.showConfig[level + 1].tipTitle);
				}
				
			}
			opts.commonChange($dom, level);
			if(isLast){
				opts.lastChange($thisDom.find("select:last"));
			}
			if(opts.isChosen){
				$thisDom.find("select").trigger("chosen:updated");
			}
			
		}
		
		var getLevel = function(obj, level){
			if(!level) level = 0;
			if(obj){
				if(obj[opts.dataPid] == opts.rootPid){
					return level;
				}else{
					return getLevel(getObj(obj[opts.dataPid]), ++level);
				}
			}
		}
		
		var setValue = function(obj, level){
			if(obj && level >= 0){
				$thisDom.find("select")[level].innerHTML = buildOption(getChildren(obj[opts.dataPid]), opts.showConfig[level].tipTitle, obj[opts.dataId]);
				setValue(getObj(obj[opts.dataPid]), --level);
			}else{
				return;
			}
		}
		 
		var setDefault = function(id){
			var obj = getObj(id);
			if(obj){
				var level = getLevel(obj);
				setValue(obj, level);
				if(level == opts.showConfig.length - 1){
					opts.lastChange($thisDom.find("select:last"));
				}else{
					$thisDom.find("select")[level + 1].innerHTML = buildOption(getChildren(obj[opts.dataId]), opts.showConfig[level + 1].tipTitle);
				}
			}else{
				$thisDom.find("select")[0].innerHTML = buildOption(getChildren(opts.rootPid), opts.showConfig[0].tipTitle);
			}
			
			if(opts.isChosen){
				$thisDom.find("select").trigger("chosen:updated");
			}
			
		}
		
		var setDefaultValue = function(id){
			var values = [];
			if(id != -1 && opts.isMultiple){
				values = id.toString().split(opts.separator);
				setDefault(values[0]);
				var $options = $thisDom.find("select:last option");
				for(var o in $options){
					for(var v in values){
						if($options[o].value == values[v]){
							$options[o].selected = true;
						}
					}
				}
				if(opts.isChosen){
					$thisDom.find("select").trigger("chosen:updated");
				}
			}else{
				setDefault(id);
			}
		}
		
		this.setDefaultValue = setDefaultValue;
		//初始化数据
		var initData = function(){
			var html = [];
			var values = [];
			for(var i = 0; i < opts.showConfig.length; i++){
				html.push('<select class="form-control" level="'+i+'" style="width:'+(opts.showConfig[i].width?opts.showConfig[i].width:width)+'" '+(opts.showConfig[i].name?'name="'+opts.showConfig[i].name+'"':'')+'><option value="">'+opts.showConfig[i].tipTitle+'</option></select>')
			}
			$thisDom.append(html.join(" "));
			if(opts.isDisabled){
				$thisDom.find("select").attr("disabled", true);
			}
			if(opts.isReadOnly){
				$thisDom.find("select").attr("readonly", true);
			}
			if(opts.defaultValue == -1 && $thisDom.attr(opts.valueAttr)){
				opts.defaultValue = $thisDom.attr(opts.valueAttr);
			}
			if(opts.isMultiple){
				$thisDom.find("select:last").attr("multiple", true);
			}
			
			setDefaultValue(opts.defaultValue);
			
			$thisDom.on("change", "select", function(event){
				change($(event.target));
			});
			if(opts.isChosen){
				$thisDom.find("select").chosen({
					search_contains : true,
					allow_single_deselect : false
				});
			}
			opts.initFinish();
		}
		
		//获取数据
		var getData = function(url){
			if(!url){
				url = opts.url;
			}
			if(ldData[url]){
				return ldData[url];
			}else{
				$.ajax({
					url : url,
					async : false,
					dataType : "json",
					success : function(data){
						ldData[url] = data;
					}
				});
				return ldData[url];
			}
		}
		
		//插件入口
		initData();
	}
	
	$.fn.createLd = function(param){
		return new ld($(this), param);
	}
	
	//省市区联动
	$.fn.areaLd = function(param){
		var defaults = {
				url : "common/area/getAll.jhtml",//获取数据的URL
				dataId : "areaId",//数据ID
				dataPid : "pid",//数据父ID
				rootPid : 0,//根节点PID
				dataTitle : "${title}",//显示出来的字段
				showConfig : [{name:"province",tipTitle:"--省--"},{name:"city",tipTitle:"--市--"},{name:"area",tipTitle:"--区--"}]
		};
		var opts = $.extend(defaults, param);
		return new ld($(this), opts);
	}
	
	//行业类别联动
	$.fn.tradeLd = function(param){
		var defaults = {
				url : "common/trade/getLdAll.jhtml",//获取数据的URL
				dataId : "tid",//数据ID
				dataPid : "pid",//数据父ID
				dataTitle : "${tradename}",
				rootPid : 0,//根节点PID
				showConfig : [{tipTitle:"请选择"},{tipTitle:"请选择"}]
		};
		var opts = $.extend(defaults, param);
		return new ld($(this), opts);
	}
	
})(jQuery);


© 著作权归作者所有

SkipperD
粉丝 2
博文 5
码字总数 2892
作品 0
武汉
程序员
私信 提问
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
41
0
jQuery Widgets —— 多组件 jQuery 插件库

jQuery Widgets 是一套基于 jQuery 或 JavaScript 的插件库 — 包含:轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件。...

王练
2016/11/23
15
0
JavaWeb04-HTML篇笔记(四)

1.1 案例四:使用JQuery完成省市二级联动:1.1.1 需求: 在注册页面上籍贯的信息,需要用到省市联动效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的DOM操作】 遍历的方式二:...

我是小谷粒
2018/05/09
0
0
推荐 15 个 jQuery 选择框插件

jQuery Selectbox 插件可以让你创建漂亮和吸引眼球的选择框,用于替代浏览器自带的老旧的 HTML 选择框效果。本文向你推荐 15 个 jQuery 的选择框插件,可轻松集成到你的 Web 应用中。希望你能...

oschina
2015/07/03
46.8K
13

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
6
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部