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

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'}

• 实例方法：

  方法名	参数及其类型	返回值类型	可链式操作	注释
  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

					<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)
					
				

					<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>
				

						<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>
				

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

						<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>
				

						<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>
				

						<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>
				

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

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

						山西省：<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>
				

						山西省：<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>
				

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

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

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

						<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>
				

						<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>
				

					<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>