多级联动下拉框框

/**
 * 基于jQuery的input转联动下拉框
 */
(function($){
	
	function createOptions(o,withDefault){
		var defaultOpt = withDefault ? "<option value=''>"+withDefault+"</option>" : "<option value=''>请选择</option>";
		if(!o)return defaultOpt;
		var str = defaultOpt;
		for(i in o){
			if(typeof o[i] === 'string' || typeof o[i] === 'number'){
				str += "<option value='"+o[i]+"'>"+i+"</option>"; 
			}else{
				var show = i, value = i, split = i.split('_');
				if(split.length === 2){
					show = split[0];
					value= split[1];
				}
				str += "<option value='"+value+"'>"+show+"</option>";
			}
		}
		return str;
	}
	
	
	$.util = $.util || {};
	
	/**
	 * 赋值
	 */
	$.util.setSelectValue = function($this,value){
		if(value){
			$this.val(value);
		}else{
			value = $this.val();
		}
		
		var data = $this.data("selectData"),
			o = data.o,
			valueMap = data.valueMap,
			optionMap = data.optionMap;
			withDefault = data.withDefault;
		
		var first = $this.next().children().first();
		
		//获取填充路径
		var keyMap = "";
		if(value && valueMap[value]){
			keyMap = valueMap[value];
		}else{
			if($.util.withFirstValue){
				keyMap = valueMap["$$"];
			}else{
				first.children().removeAttr('selected').first().attr('selected',true);
			}
		}
		
		var keyArr = keyMap.split('$');
		
		//选中第一个层option
		first.children("option[value="+keyArr[1]+"]").attr("selected",true);
		
		$this.next().children().each(function(i){
			//依次选中各个select的option
			next = $(this).next();
			if(next.length){
				next.html(createOptions(optionMap[keyArr[i+1]],withDefault));
				//alert(keyArr[i+2]);
				try{
					next.children("option[value="+keyArr[i+2]+"]").attr("selected",true);
				}catch(e){
//					for(n in e){
//						alert(n+" : "+e[n]);
//					}
//					var dom = next.children("option[value="+keyArr[i+2]+"]");
//					for(m in dom){
//						alert(m+" : "+dom[m]);
//					}
					//IE6的selected无法设置未知错误。
				} 
			}
		});
	};
	
	
	/**
	 * render: 待绑定jQuery对象
	 * o ： 联动菜单列表
	 * selectors : 每个选择框的属性
	 * withDefault：使用的默认待选项
	 * next： 包含select的父标签
	 */
	$.util.optionTree = function(render,o,selectors,withDefault,next){
		if(!(render instanceof $ && render.length )){
			return false;
		}
		var defaultOpt = withDefault ? "<option value=''>"+withDefault+"</option>" : "<option value=''>请选择</option>";
		selectors = selectors || [{}];
		var valueMap = {},
			optionMap = {};
		reverseMap(o,"",valueMap,optionMap);
		
		render.each(function(){
			var i = 0;
			$(this).hide().after(next || $("<span></span>"));
			var span = $(this).next().html("");
			
			while(i < selectors.length){
				span.append($("<select>"+defaultOpt+"</select>").attr(selectors[i]));
				i++;
			}
			var input = $(this),
				value = $(this).val();
			
			
			var first = span.children().first();
			
			first.html(createOptions(o,withDefault));
			
			$(this).data("selectData",{
				"o" : o,
				"valueMap" : valueMap,
				"optionMap" : optionMap,
				"withDefault" : withDefault
			});
			
			$.util.setSelectValue($(this));
			
			//初始化select事件
			span.children().bind('change',function(){
				var next = $(this).next().val("");
				if(next.length){
					next.html(createOptions(optionMap[$(this).val()],withDefault));
					var t = next.next();
					while(t.length){
						t.html(defaultOpt);
						t = t.next();
					}
					input.val("");
				}else{
					input.val($(this).val());
				}
			});
		
		});

		function reverseMap(o,prefix,valueMap,optionMap){
			prefix = prefix || "";
			valueMap = valueMap || {},
			optionMap = optionMap || {};
			
			for(i in o){
				if(typeof o[i] === 'string' || typeof o[i] === 'number'){
					valueMap[o[i]] = prefix+"$"+o[i]+"$"+i;
					valueMap["$$"] = valueMap["$$"] || valueMap[o[i]];
				}else{
					var t = i;
					var split = i.split('_');
					if(split.length === 2){
						valueMap[split[1]] = prefix+"$"+split[1]+"$"+split[0];
						t = split[1];
						optionMap[t] = o[i];
					}else{
						optionMap[t] = o[t];
					}
					reverseMap(o[i],prefix+"$"+t,valueMap,optionMap);
				}
				
			}
			
		}
		
	};
	
	
})(jQuery);


用法：
<input type="text" name="industryTree" id="industryTree" value='35'/>


var industryTree = {
        		        "制造业-食品饮料烟草类制造及制品": {
        		            "农副食品加工业": 13,
        		            "食品制造业": 14,
        		            "饮料制造业": 15,
        		            "烟草制品业": 16
        		        },
        		        "制造业-纺织服装皮革木材类制造及制品": {
        		            "纺织业": 17,
        		            "纺织服装、鞋、帽制造业": 18,
        		            "皮革、毛皮、羽毛(绒)及其制品业": 19,
        		            "木材加工及木、竹、藤、棕、草制品业" :20
        		        },
        		        "制造业-家具造纸印刷文体类制造及制品": {
        		            "家具制造业": 21,
        		            "造纸及纸制品业": 22,
        		            "印刷业和记录媒介的复制": 23,
        		            "文教体育用品制造业": 24
        		        },
        		        "制造业-石油化工类制造及制品": {
        		            "石油加工、炼焦及核燃料加工业": 25,
        		            "化学原料及化学制品制造业": 26,
        		            "化学纤维制造业": 28,
        		            "橡胶制品业": 29,
        		            "塑料制品业": 30
        		        },
        		        "制造业-金属及矿物类制造及制品": {
        		            "非金属矿物制品业": 31,
        		            "黑色金属冶炼及压延加工业": 32,
        		            "有色金属冶炼及压延加工业": 33,
        		            "金属制品业": 34
        		        },
        		        "制造业-设备仪表类制造及制品": {
        		            "通用设备制造业": 35,
        		            "专用设备制造业": 36,
        		            "交通运输设备制造业": 37,
        		            "电气机械及器材制造业": 39,
        		            "通信设备、计算机及其他电子设备制造业": 40,
        		            "仪器仪表及文化、办公用机械制造业": 41
        		        }
                        };
jQuery.util.optionTree(jQuery("#industryTree"),industryTree,[{
        			name : '一级选框'
        		},{
        			name : '二级选框'
        		},{
        			name : '三级选框'
        		}]);