多级联动下拉框框
2012-06-03 15:48:22 来源:WEB开发网核心提示:/** * 基于jQuery的input转联动下拉框 */(function($){function createOptions(o,withDefault){var defaultOpt = withDefault ? "<option value=''>"+withD
/** * 基于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 : '三级选框' }]);