LinkageSel: 通用JavaScript无限级联动下拉菜单

Overview

多级联动，支持Ajax动态获取数据并缓存数据，动态生成下级select菜单，设置动态生成"option"第一个条目作为提示项，自动选择唯一选项的菜单，设置回调函数在onChange事件触发时获取下拉菜单相关信息。详细功能及设置请见DEMO。

Requirement

jQuery v1.6+

License

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html

Author

waiting AT xiaozhong.biz

Update

See changes

Download

linkagesel.zip 包括js客户端所有数据及postgres数据库表数据
GitHub Repository

Settings

调用方式： var linkageSel = new LinkageSel(opts);

opts参数列表：

参数名	类型	默认值	可选	注释
data	Object	null	√	指定本地数据源。至少要指定data、url、ajax其中一个的值，data可以和ajax配合使用
url	String		√	url地址，一次性远程获得所有数据
ajax	String		√	ajax远程获得下级菜单数据
autoBind	Boolean	true	√	自动生成下级select菜单
autoHide	Boolean	true	√	自动隐藏下级菜单.若false,则可配合level固定值使用
hideWidth	Boolean	true	√	如果设定自动隐藏下级菜单，则是否同时隐藏其占位宽度 true:'display:none'\|\|false: 'visibility:hidden'
autoLink	Boolean	true	√	如果只有唯一选项则选中并联动下级
defVal	Integer\|Array	true	√	默认选择项，指定多级菜单默认选项需要使用数组方式，并且按照层级顺序排列
head	String\|Number\|false	请选择	√	作为下拉菜单第一选择名称自动添加, 空字符（''）有效。若false则不自动添加
level	Integer	20	√	限定层级防止死循环
loaderImg	String	images/ui-anim_basic_16x16.gif	√	loader动态图标
root	Integer\|Array		√	根所在位置,决定获取数据入口.不适用于ajax模式
select	String\|Array			jQuery选择器字符串或者jQuery选择器字符串数组
selClass	String	LinkageSel	√	应用于所有下拉菜单的class属性，包括预先生成的对象
selStyle	String	margin-left:1px;	√	应用于下拉菜单的style属性
minWidth	Integer	120	√	下拉菜单最小宽度
maxWidth	Integer	300	√	下拉菜单最大宽度
fixWidth	Integer	0	√	下拉菜单固定，此设置将覆盖minWidth、maxWidth的效果
onChange	Function		√	菜单选择变化时回调函数
mvcQuery	Boolean	false	√	置true后ajax请求会生成符合MVC格式的URI, 比如 http://linkagesel.xiaozhong.biz/district/get_nodes/0 URI第一个分段district为controller控制器名，第二分段get_nodes为方法名，第三分段为节点的id值此时 ajax值需要设定为MVC格式，比如 ajax: 'district/get_nodes'
dataReader	Object	{id: 'id', name: 'name', cell: 'cell'}	√	自定义数据结构中键名, 比如 {id: 'gid', name: 'value', cell: 'subcell'}
size	Integer	0	√	自定义select 的size属性,不填写不显示

实例方法：

方法名	参数及其类型	返回值类型	可链式操作	注释
changeValues	parm1：Integer\|Array parm2: Boolean[option=false]	Object	√	手动改变选单值,可选触发onchange用户自定义回调函数
getSelectedValue	idx：Integer	String		返回select的值。不带参数获得联动select中'最后一个'有选择select菜单的选择值；如果大于等于0则返回第 idx 个菜单(从0开始)选择值，如果都无有选择（一般是初始化后）则返回 null
getSelectedArr		Array		返回数组包含所有select选择值
getSelectedData	key： String idx： Interger[option] 空则返回当前最后一个有选择项选单的选项项值对象	Object		返回第idx级（从0开始）菜单所选项目的对应数据的对象
getSelectedDataArr	key： String[option]	Array		获得所有有选择菜单的数据对象或对象值,遇到第一个未选择的停止。对于返回值，如果指定key则返回 data[key] 对应值: int\|str\|null; 如果未指定key返回数据对象data: obj\|null
onChange	callback: Function;		√	选项变化时回调函数，callback内的this被绑定到当前实例对象（可见Demo2）
reset			√	回复到初始状态
resetAll			√	回复到初始状态，包括默认选择项及初始数据

Demo

SyntaxHighlighter语法高亮比较耗资源，重复刷新页面可能会导致内存占用攀高

加载：

					<script src="js/jquery.js"></script>
					<script src="js/comm.js"></script>
					<script src="js/linkagesel-min.js"></script>

数据结构：

					<script>
						var data = {
							"key": {"name": nameValue, "otherAttr": otherAttrVal, "cell": { ... },
						};
					</script>
					key为条目的索引值，也等于 <option value="VALUE" > </option> 中的 value 值,必须有
					name为条目的显示值，即 <optio> name<option> ,必须有
					otherAttr其他属性，比如code,price,但不能为cell,		可选
					
					cell为下级菜单包含的数据内容，包含同样的key/name/cell格式, 可选
						
					比如：
					var data1 = {
						1: {name: '蔬菜', 
							cell: { 
								10: {name: '菠菜', price: 4 }, 
								11: {name: '茄子', price: 5} 
							}
					};
					蔬菜|-->菠菜 (id等于1, price为4)
						|-->茄子 (id等于10, price为5)

Demo1：开始一个简单的

获得最后一个有效选项value
获得最后一个有效选项属性

					<script>
					$(document).ready(function(){
						var data1 = {
							1: {name: '蔬菜', cell: { 10: {name: '菠菜', price: 4 }, 11: {name: '茄子', price: 5} }
							},
							3: {name: '水果', 
								cell: { 
									20: {name: '苹果', cell: {201: {name: '红富士', price: 20}  } } ,
									21: {name: '桃', 
											cell: { 
												210: {name: '猕猴桃', price: 30}, 
												211: {name: '油桃', price: 31}, 
												212: {name: '蟠桃', priece: 32} }
									}
								}
							},
							9: {name: '粮食', 
								cell: { 
									30: {name: '水稻', 	cell: {	301: {name: '大米', cell: {3001: {name: '五常香米', price: 50}} } } 	} 
								}
							}
						};
						var opts = {
								data: data1,
								select: '#demo1'
						};
						var linkageSel1 = new LinkageSel(opts);
						
						$('#getSelectedValue').click(function() {
							var v = linkageSel.getSelectedValue();
							alert(v);
						});
						
						$('#getSelectedData').click(function() {
							var name = linkageSel.getSelectedData('name'),
								price = linkageSel.getSelectedData('price');
							alert('名称:' + name + ' 价格:' + price);

						});
					});
					</script>

Demo2：省市地三级联动, 本地加载数据。onChange时获取相关属性

获得各级菜单所选值

						<select id="demo2"></select>
						地址：<input type="text" value="tip" id="tip" size="50" />
						<input type="button" title="获得各级菜单所选值" value="button3" id="getValueArr2"/>
					
						<script src="js/district-all.js"></script>
						<script>
							var opts = {
									data: districtData,		// districtData为district-all.js中定义的变量
									selStyle: 'margin-left: 3px;',
									select:  '#demo2' 
							};
									
							var linkageSel2 = new LinkageSel(opts);
							districtData = opts = null;	// 如果数据量大最好在创建LinkageSel实例之后清空
							
							$('#getValueArr2').click(function() {
								var arr = linkageSel2.getSelectedArr();
								alert(arr.join(','));
							});	
							
							linkageSel2.onChange(function() {
								var input = $('#tip'),
									d = this.getSelectedDataArr('name'),	// 所有有选定菜单的name. this === linkageSel2
									zip = this.getSelectedData('zip'),		// 最末选定菜单的zip数据值
									arr = [];
								for (var i = 0, len = d.length; i < len; i++) {
									arr.push(d[i]);
								}
								zip = zip ? ' 邮编:' + zip : '';
								input.val(arr.join(' ') + zip);
							});
						</script>

Demo3：省市地三级联动, Ajax动态获取下级数据

						<script>
							var opts = {
									ajax: 'district_crud.php?aj=15',
									selStyle: 'margin-left: 3px;',
									select: '#demo3' 
							};
									
							var linkageSel3 = new LinkageSel(opts);
						</script>

Demo4：1级数据JS中赋值, Ajax动态获取2、3级数据

						<script>
							var data4 = {2: {name: '北京市'}, 4:{name: '河北省'} };
							var opts4 = {
									data: data4,
									ajax: 'district_crud.php?aj=15',	// ajax与data配合获取未定义的下级数据
									selStyle: 'margin-left: 3px;',
									select: '#demo4'
							};
									
							new LinkageSel(opts4);
						</script>

Demo5：指定默认选项

						<script src="js/district-all.js"></script>
						<script>
							var opts5 = {
									data: districtData,			// districtData为district-all.js中定义的变量
									selStyle: 'margin-left: 3px;',
									select:  ['#demo5'], 		// select的值可以是个数组
									defVal: [4]
							};
									
							var linkageSel5 = new LinkageSel(opts5);
						</script>

Demo6：指定默认选项, 静态动态混合select

						<select id="demo61"></select> <select id="demo62"></select>
						<script>
							var opts6 = {
									data: districtData,
									select:  [ '#demo61', '#demo62' ], 		// 2个静态,剩余的动态生成	
									defVal: 4
							};
									
							var linkageSel6 = new LinkageSel(opts6);
						</script>

Demo7：指定多个默认选项, 动态生成select

						<select id="demo7"></select>
						<script>
							var opts7 = {
									data: districtData,
									selStyle: 'margin-left: 3px;',
									select:  '#demo7', 		// 只有一个
									defVal: [5, 256]		// 可是两个哟
							};
									
							var linkageSel7 = new LinkageSel(opts7);
						</script>

Demo8：定义数据入口

山西省：

						山西省：<select id="demo8"></select>
						<script>
							var opts8 = {
									data: districtData,
									root: 5,				// 数据入口
									selStyle: 'margin-left: 3px;',
									select:  '#demo8' 		
							};
									
							var linkageSel8 = new LinkageSel(opts8);
						</script>

Demo9：指定数据入口, 多个默认选项

山西省：

						山西省：<select id="demo9"></select>
						<script>
							var opts9 = {
									data: districtData,
									root: 5,				// 数据入口
									selStyle: 'margin-left: 3px;',
									select:  '#demo9', 		
									defVal: [256, 257]		// 两个哟
							};
									
							var linkageSel9 = new LinkageSel(opts9);
						</script>

Demo10：指定深层数据入口, 默认选项

山西省太原市：

						山西省：<select id="demo10"></select>
						<script>
							var opts10 = {
									data: districtData,
									root: [5, 256],				// 深层数据入口
									selStyle: 'margin-left: 3px;',
									select:  '#demo9', 		
									defVal: 257
							};
									
							var linkageSel10 = new LinkageSel(opts10);
							
						</script>

Demo11：固定宽度

						<select id="demo11"></select>
						<script>
							var opts11 = {
									data: districtData,
									selStyle: 'margin-left: 3px;',
									select: '#demo11',
									fixWidth: 200,			// 固定宽度
									head: '想好了选哪个么'	// 自定义
							};
									
							var linkageSel11 = new LinkageSel(opts11);
						</script>

Demo12：不使用提示条目

						<select id="demo12"></select>
						<script>
							var opts12 = {
									data: districtData,
									select: '#demo12',
									head: false	// 不使用自动生成提示作为菜单第一项
							};
									
							var linkageSel12 = new LinkageSel(opts12);
						</script>

Demo13：一次性远程获取数据，不适合大数据量情况

						<select id="demo13" > </select>
						<script>
							var opts13 = {
									select: '#demo13',
									url: 'exampledata.php'
							};
									
							var linkageSel13 = new LinkageSel(opts13);
						</script>

Demo14：1级菜单数据JS文件加载, Ajax动态获取2、3级数据

						<script src="js/district-level1.js"></script>
						<script>
							var opts14 = {
									data: districtData1,		//  注意变量名
									ajax: 'district_crud.php?aj=15',	// ajax与data配合获取未定义的下级数据
									selStyle: 'margin-left: 3px;',
									select: '#demo14'
							};
									
							var linkageSel14 = new LinkageSel(opts14);
						</script>

Demo15：1级菜单数据JS文件加载, Ajax动态获取2、3级数据。手动设定值，可用于编辑页面的自动选定

						<body>
							<button type="button" onclick="javascript: ls15.changeValues([23, 2244])">changeValues</button>
						</body>

						<script src="js/district-level1.js"></script>
						<script>
							var ls15;	// must outside of ready() !
							$(document).ready(function(){
								var opts15 = {
										data: districtData1,		//  注意变量名
										ajax: 'district_crud.php?aj=15',	// ajax与data配合获取未定义的下级数据
										selStyle: 'margin-left: 3px;',
										select: '#demo15'
								};
										
								window.ls15 = new LinkageSel(opts15);
							});	
						</script>

Demo16：自定义数据key名

					<script>
					$(document).ready(function(){
						var data16 = {
							1: {gid: 1, value: 'IBM', 
								sub: { 
									10: {gid: 10, value: 'X3650'}, 
									11: {gid: 11, value: 'X3860'} 
								}
							},
							3: {gid: 3, value: 'HP', 
								sub: { 
									20: {gid: 20, value: '360'} ,
									21: {gid: 21, value: '380'}
								}
							},
							9: {gid: 9, value: 'DELL', 
								sub: { 
									29: {gid: 29, value: 'R710'} 
									30: {gid: 30, value: 'R720'} 
								}
							}
						};
						var opts = {
								data: data16,
								select: "[name='demo16']",
								dataReader: {id: 'gid', name: 'value', cell: 'sub'}	// self defined data key name
						};
						var ls16 = new LinkageSel(opts);
					});
					</script>

Demo17：ajax获取数据且多个默认值. 注意与demo7的区别

						<select id="demo17"></select>
						<script>
							var opts17 = {
									//data: districtData,	// demo7
									ajax: 'district_crud.php?aj=15',
									selStyle: 'margin-left: 3px;',
									select:  '#demo17',
									defVal: [5, 256, 257]
							};
									
							var linkageSel17 = new LinkageSel(opts17);
						</script>

Demo18：不使用提示条目，指定默认值

						<select id="demo18"></select>
						<script>
							var opts18 = {
									data: districtData,
									select: '#demo18',
									defVal: [5, 256, 257], 
									head: false	// 不使用自动生成提示作为菜单第一项
							};
									
							var linkageSel18 = new LinkageSel(opts18);
						</script>

Javascript Infinite Level Select 无限级联动下拉菜单

Overview

Requirement

License

Author

Update

Download

Settings

Demo

加载：

数据结构：

Demo1：开始一个简单的

Demo2：省市地三级联动, 本地加载数据。onChange时获取相关属性

Demo3：省市地三级联动, Ajax动态获取下级数据

Demo4：1级数据JS中赋值, Ajax动态获取2、3级数据

Demo5：指定默认选项

Demo6：指定默认选项, 静态动态混合select

Demo7：指定多个默认选项, 动态生成select

Demo8：定义数据入口

Demo9：指定数据入口, 多个默认选项

Demo10：指定深层数据入口, 默认选项

Demo11：固定宽度

Demo12：不使用提示条目

Demo13：一次性远程获取数据，不适合大数据量情况

Demo14：1级菜单数据JS文件加载, Ajax动态获取2、3级数据

Demo15：1级菜单数据JS文件加载, Ajax动态获取2、3级数据。手动设定值，可用于编辑页面的自动选定

Demo16：自定义数据key名

Demo17：ajax获取数据且多个默认值. 注意与demo7的区别

Demo18：不使用提示条目，指定默认值