Jquery Select 插件 lyhucSelect 数据联动

数据源：

 

View Code

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

效果：

转载于:https://www.cnblogs.com/hubj/archive/2011/03/29/1998284.html