Javascript Infinite Level Linkage Select

Overview

• Multi level linkage, support ajax request and data cache, dynamic <select>construct, self defined tips as the first<option>, the only one <option>selected automatically, self defined callback function when onChange event triggered.

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 including chinese-district data of js and postgres
• GitHub Repository

Settings

• Usage: var linkageSel = new LinkageSel(opts);
• opts params：

  param name	type	default value	optional	comment
  data	Object	null	√	local js data. can be used with 'ajax' param
  url	String		√	remote url address, get all data at one time
  ajax	String		√	remote url address for ajax
  autoBind	Boolean	true	√	whether constrct next level <select> automatically
  autoHide	Boolean	true	√	whether hide next levevl <select> which has not items
  hideWidth	Boolean	true	√	whether release the postion width if set 'autoHide' to TRUE. (true->'display:none'||false-> 'visibility:hidden')
  autoLink	Boolean	true	√	whether linkage to next level if only one item exists
  defVal	Integer|Array	true	√	default selected value. integer for first <select>, array for multi <select>
  head	String|Number|false	Please select..	√	the first <option> name. blank string ('') is valid
  level	Integer	20	√	limit to avoid Infinite loop
  loaderImg	String	images/ui-anim_basic_16x16.gif	√	ajax loader image
  root	Integer|Array		√	root entry. invalid for ajax request
  select	String|Array			jQuery selector of array of selector
  selClass	String		√	class name for <select> which is constructed by code
  selStyle	String		√	css style for <select> which is constructed by code
  minWidth	Integer	120	√
  maxWidth	Integer	300	√
  fixWidth	Integer	0	√	override effect defined by minWidth or maxWidth
  onChange	Function		√	callback function when onChange event fired
  mvcQuery	Boolean	false	√	ajax request url compatible to MVC when set to true, eg. http://linkagesel.xiaozhong.biz/district/get_nodes/1 when 'ajax' set to 'district/get_nodes'
  dataReader	Object	{id: 'id', name: 'name', cell: 'cell'}	√	You can define othe data key name , such as {id: 'gid', name: 'value', cell: 'subcell'}
  size	Integer	0	√	Custom select's size property, not to be displayed

• Method：

  method name	param and type	type of return	chainable	comment
  changeValues	param1：Integer|Array param2: Boolean[option=false]	Object	√	change option value by hand. param2 to determine fire callback funcion bind on onChange event or not
  getSelectedValue	idx：Integer	String		return the value of the idx of <select> (begein from zero). the return value is from the last element if no param pass. return null if all element no selected item.
  getSelectedArr		Array		the return array include the value of all elements
  getSelectedData	key： String idx： Interger[option]	Object		get data of the selected item row. the return data will from the last elemnet which has valid selected item if pass zero to inx
  getSelectedDataArr	key： String[option]	Array		get all of the element object or object value which has selected item, stop at the one which has no seleted item. if key is valid then return object[key] (type is int|string|null), if key not defined then return ojbect (typeis object|null)
  onChange	callback: Function;		√	callback function bind to onchange event on element. the variable this inner the function refer to the instance of LinkageSel (See Demo2)
  reset			√	reset to init status
  resetAll			√	reset to init status, including defVal and data

Demo

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

					<script>
						{
							$id : {"name": $nameValue, "otherAttr": $otherAttrVal, "cell": { ... },
						};
						or 
						{
							$id : {"id": $id, "name": $nameValue, "otherAttr": $otherAttrVal, "cell": { ... },
						};
					</script>
					
					$id is sequence index, used at <option value="$id"></option>  the value of the "value"
					'name' is used at  <optio>NAME<option>
					'otherAttr' is optional other key name, such as  'price', 'zip'
					'cell' is optional key name which contains sub data row
						
					example:
					var data1 = {
						1: {name: 'Vegetables', 
							cell: { 
								10: {name: 'Spinach', price: 4 }, 
								11: {name: 'Eggplant', price: 5} 
							}
					};
					or
					var data1 = {
						1: {id: 1, name: 'Vegetables', 
							cell: { 
								10: {id: 10, name: 'Spinach', price: 4 }, 
								11: {id: 11, name: 'Eggplant', price: 5} 
							}
					};
					or
					var data1 = {
						123: {id: 1, name: 'Vegetables', 
							cell: { 
								234: {id: 10, name: 'Spinach', price: 4 }, 
								345: {id: 11, name: 'Eggplant', price: 5} 
							}
					};

					Vegetables	(id==1)
							|-->Spinach (id==1, price==4)
							|-->Eggplant (id==10, price==5)
					
				

					<script>
					$(document).ready(function(){
						var data1 = {
							1: {name: 'Vegetables', cell: { 10: {name: 'Spinach', price: 4 }, 11: {name: 'Eggplant', price: 5} }
							},
							3: {name: 'Fruit', 
								cell: { 
									20: {name: 'Apple', cell: {201: {name: 'china', price: 20}  } } ,
									21: {name: 'Peach', 
											cell: { 
												210: {name: 'Kiwi', price: 30}, 
												211: {name: 'Nectarine', price: 31}, 
											}
									}
								}
							},
							9: {name: 'Food', 
								cell: { 
									30: {name: 'Rice', 	cell: {	301: {name: 'USA', cell: {3001: {name: 'China', 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:' + name + ' price:' + price);

						});
					});
					</script>
				

						<select id="demo2"></select>
						地址：<input type="text" value="tip" id="tip" size="50" />
						<input type="button" value="button3" id="getValueArr2"/>
					
						<script src="js/district-all.js"></script>
						<script>
							var opts = {
									data: districtData,		// 'districtData' is the variable name assign in district-all.js
									selStyle: 'margin-left: 3px;',
									select:  '#demo2' 
							};
									
							var linkageSel2 = new LinkageSel(opts);
							districtData = opts = null;	
							
							$('#getValueArr2').click(function() {
								var arr = linkageSel2.getSelectedArr();
								alert(arr.join(','));
							});	
							
							linkageSel2.onChange(function() {
								var input = $('#tip'),
									d = this.getSelectedDataArr('name'),	// this refer to linkageSel2
									zip = this.getSelectedData('zip'),		// zip of the last elm
									arr = [];
								for (var i = 0, len = d.length; i < len; i++) {
									arr.push(d[i]);
								}
								zip = 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: 'Beijing'}, 4:{name: 'Hebei province'} };
							var opts4 = {
									data: data4,
									ajax: 'district_crud.php?aj=15',	// ajax+local data
									selStyle: 'margin-left: 3px;',
									select: '#demo4'
							};
									
							new LinkageSel(opts4);
						</script>
				

						<script src="js/district-all.js"></script>
						<script>
							var opts5 = {
									data: districtData,
									selStyle: 'margin-left: 3px;',
									select:  ['#demo5'], 		// can be Array
									defVal: [4]
							};
									
							var linkageSel5 = new LinkageSel(opts5);
						</script>
				

						<select id="demo61"></select> <select id="demo62"></select>
						<script>
							var opts6 = {
									data: districtData,
									select:  [ '#demo61', '#demo62' ], 		// two static
									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]		// array
							};
									
							var linkageSel7 = new LinkageSel(opts7);
						</script>
				

						Shanxi Province: <select id="demo8"></select>
						<script>
							var opts8 = {
									data: districtData,
									root: 5,				// entry
									selStyle: 'margin-left: 3px;',
									select:  '#demo8' 		
							};
									
							var linkageSel8 = new LinkageSel(opts8);
						</script>
				

						Shanxi Province: <select id="demo9"></select>
						<script>
							var opts9 = {
									data: districtData,
									root: 5,				// entry
									selStyle: 'margin-left: 3px;',
									select:  '#demo9', 		
									defVal: [256, 257]		// two
							};
									
							var linkageSel9 = new LinkageSel(opts9);
						</script>
				

						Shanxi Province, Taiyuan city: <select id="demo10"></select>
						<script>
							var opts10 = {
									data: districtData,
									root: [5, 256],				// array
									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,			// fixed
									head: 'Which one?'	// tips
							};
									
							var linkageSel11 = new LinkageSel(opts11);
						</script>
				

						<select id="demo12"></select>
						<script>
							var opts12 = {
									data: districtData,
									select: '#demo12',
									head: false	// no tips
							};
									
							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,		//  districtData1 name assign in file district-level1.js
									ajax: 'district_crud.php?aj=15',	
									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',
										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>
				

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

						<select id="demo18"></select>
						<script>
							var opts18 = {
									data: districtData,
									select: '#demo18',
									defVal: [5, 256, 257], 
									head: false	// no tips
							};
									
							var linkageSel18 = new LinkageSel(opts18);
						</script>