Jquery Select 插件 lyhucSelect 数据联动

数据源：

 

var areaInfo = new Array();
areaInfo[0] = new Array();
areaInfo[0][0]="1";
areaInfo[0][1]="Beijing";
areaInfo[0][2]="0";
areaInfo[0][3]="0";
areaInfo[1] = new Array();
areaInfo[1][0]="2";
areaInfo[1][1]="Shanghai";
areaInfo[1][2]="0";
areaInfo[1][3]="0";
areaInfo[2] = new Array();
areaInfo[2][0]="3";
areaInfo[2][1]="Jing'an";
areaInfo[2][2]="2";
areaInfo[2][3]="0";
areaInfo[3] = new Array();
areaInfo[3][0]="4";
areaInfo[3][1]="Changning";
areaInfo[3][2]="2";
areaInfo[3][3]="0";
areaInfo[4] = new Array();
areaInfo[4][0]="5";
areaInfo[4][1]="Luwan";
areaInfo[4][2]="2";
areaInfo[4][3]="0";
areaInfo[5] = new Array();
areaInfo[5][0]="6";
areaInfo[5][1]="Huangp";
areaInfo[5][2]="2";
areaInfo[5][3]="0";
areaInfo[6] = new Array();
areaInfo[6][0]="7";
areaInfo[6][1]="Pudong";
areaInfo[6][2]="2";
areaInfo[6][3]="0";
areaInfo[7] = new Array();
areaInfo[7][0]="8";
areaInfo[7][1]="Minhang";
areaInfo[7][2]="2";
areaInfo[7][3]="0";
areaInfo[8] = new Array();
areaInfo[8][0]="9";
areaInfo[8][1]="Qingpu";
areaInfo[8][2]="2";
areaInfo[8][3]="0";
areaInfo[9] = new Array();
areaInfo[9][0]="10";
areaInfo[9][1]="Hongkou";
areaInfo[9][2]="2";
areaInfo[9][3]="0";
areaInfo[10] = new Array();
areaInfo[10][0]="11";
areaInfo[10][1]="Zhabei";
areaInfo[10][2]="2";
areaInfo[10][3]="0";
areaInfo[11] = new Array();
areaInfo[11][0]="12";
areaInfo[11][1]="Putuo";
areaInfo[11][2]="2";
areaInfo[11][3]="0";
areaInfo[12] = new Array();
areaInfo[12][0]="13";
areaInfo[12][1]="Yangpu";
areaInfo[12][2]="2";
areaInfo[12][3]="0";
areaInfo[13] = new Array();
areaInfo[13][0]="14";
areaInfo[13][1]="Others";
areaInfo[13][2]="2";
areaInfo[13][3]="0";

 

jquery.lyhucSelect.js

 

(function($) {
     $.fn.lyhucSelect = function(options) {
	
		var element     = this;
		var elementid     =  "#" + element[0].id;
		
		 var defaults = {
			dataSource:{},
			subSelect:'#subcategory',
			option:{text:'--Select--',value:''},
			value:'0',
			parentid:0
		};
		
		var options = $.extend(defaults, options);
		var defaultoption = new Option();
		var defaultsuboption = new Option();

		(function init(){
			defaultoption.text=options.option.text;
			defaultoption.value=options.option.value;
			$(elementid).append(defaultoption);
			
			defaultsuboption.text=options.option.text;
			defaultsuboption.value=options.option.value;
			$(options.subSelect).append(defaultsuboption);
			
			$(options.dataSource).each(function(i){
				var id=options.dataSource[i][0];
				var mc=options.dataSource[i][1];
				
				if(options.parentid==options.dataSource[i][2])
				{
					var newoption = new Option();
					newoption.value=id;
					newoption.text=mc;
					$(elementid).append(newoption);
				}
			});
		
		})();
				
		return this.each(function(){
				
				$(this).bind("change",function(e){
					var currentVal=$(this).val();
					var tmpDepth=0;
					
					$(options.subSelect).empty();
					
					$(options.dataSource).each(function(i){
						
						var id=options.dataSource[i][0];
						var mc=options.dataSource[i][1];
						
						if(currentVal==options.dataSource[i][2])
						{
							var newoption = new Option();
							newoption.value=id;
							newoption.text=mc;
							$(options.subSelect).append(newoption);
							tmpDepth++;
						}
					});
					
					if(tmpDepth==0)
					{
						var parentoption = new Option();
						parentoption.value=$(elementid).val();
						parentoption.text=$(elementid).find('option:selected').text();
						$(options.subSelect).append(parentoption);
					}
					
				});
				
			});

    };
	

})(jQuery);

 

 调用：

$('#cityCategory').lyhucSelect({dataSource:areaInfo,subSelect:'#areCategory'});

效果：