中文 | English

Overview

Requirement

License

Author

Update

Download

Settings

Demo

Loading:

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

Data structure

					<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)
					
				
You can define the key name by yourself pass dataReader

Demo1:Start simple one

get value of the last one which has selected item
get last attribute value of the valid last
					<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>
				

Demo2:Chinese provience city 3 level chain, all data local, get attribute value on onChange

get the value of all <select> elements
						<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>
				

Demo3:Chinese provience city 3 level chain, all data from ajax request

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

Demo4: 1st level local, others ajax get

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

Demo5: set default item

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

Demo6: set default item, generate the 3rd element dynamically

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

Demo7:set default items by pass array

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

Demo8: define data entry

Shanxi Province:
						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>
				

Demo9: define data entry, multi default item by pass array

Shanxi Province:
						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>
				

Demo10: set multi data entries by pass array

Shanxi Province, Taiyuan city:
						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>
				

Demo11: fixed width

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

Demo12: no tips

						<select id="demo12"></select>
						<script>
							var opts12 = {
									data: districtData,
									select: '#demo12',
									head: false	// no tips
							};
									
							var linkageSel12 = new LinkageSel(opts12);
						</script>
				

Demo13: get all data by ajax one time

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

Demo14: 1st level local data, others ajax get

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

Demo15: change selected item

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

Demo16:set data key name via dataReader

					<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:set default items by pass array, fetching data by ajax. see diff from 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>