jquery聯動下拉選項

標籤：des   style   io   ar   os   使用   sp   for   on   

//聯動 jsvar ldData = {};(function(){function ld($thisDom, param){var defaults = {url : "common/area/getAll.jhtml",//擷取資料的URLdataId : "id",//資料IDdataPid : "pid",//資料父IDrootPid : 0,//根節點PIDdataTitle : "請配置dataTitle屬性",//顯示出來的字元，其中以${title}輸出data中的title欄位showConfig : [],//select參數[{name:"aa",tipTitle:"無值時顯示的資料"width:"寬度"},{name:"aa",tipTitle:"無值時顯示的資料"width:"寬度"}]//--以上為必選參數valueAttr : "initValue",//初始值屬性defaultValue : -1,//省預設值isDisabled : false,//是否設為不可用isReadOnly : false,//是否設為唯讀isChosen : false,//是否增加聯想框isMultiple : false,//地區是否支援多選separator : ";",//開啟多選時設定預設值使用的分隔字元commonChange : function($dom, level){},//聯動條觸發change事件後額外掉用的方法lastChange : function($dom){},//區選擇後的回調方法initFinish : function(){}//初始化完成以後回調方法};var opts = $.extend(defaults, param);//擷取寬度var width = (Math.round(100/opts.showConfig.length) - 1) + "%";//擷取title字串var getTitle = function(obj, tempStr){var res = "";var i = 0;while(tempStr.indexOf("${", i) >= 0){var start = tempStr.indexOf("${", i);var end = tempStr.indexOf("}", i);if(start > i){res += tempStr.substring(i, start);}var el = tempStr.substring(start + 2, end);if(obj[el]){res += obj[el];}i = end + 1;}return res += tempStr.substring(i);}//構建option的html(dataArray:資料數組,defaultStr:預設文字,current:當先選中的資料ID)var buildOption = function(dataArray,defaultStr,current){var html = [];html.push(‘<option value="">‘+defaultStr+‘</option>‘);if(dataArray && $.isArray(dataArray) && dataArray.length > 0){for(var i = 0;i < dataArray.length; i++){//console.info(getTitle(dataArray[i],opts.dataTitle));if(current == dataArray[i][opts.dataId]){html.push(‘<option value="‘+dataArray[i][opts.dataId]+‘" selected>‘+getTitle(dataArray[i],opts.dataTitle)+‘</option>‘);}else{html.push(‘<option value="‘+dataArray[i][opts.dataId]+‘">‘+getTitle(dataArray[i],opts.dataTitle)+‘</option>‘);}}}return html.join(" ");}//通過ID擷取資料var getObj = function(id){if(id != -1){for(var i = 0; i < getData().length; i ++){if(getData()[i][opts.dataId] == id){return getData()[i];}}}return undefined;}//通過父ID擷取子集var getChildren = function(pid){var res = [];for(var i = 0; i < getData().length; i ++){if(getData()[i][opts.dataPid] == pid){res.push(getData()[i]);}}return res;}//選擇事件方法var change = function($dom){var value = $dom.val();var obj = getObj(value);var level = parseInt($dom.attr("level"));var isLast = level == undefined || level == opts.showConfig.length - 1;if(!isLast){for(var i = level + 1; i < opts.showConfig.length; i++){$thisDom.find("select")[i].innerHTML = buildOption(undefined, opts.showConfig[i].tipTitle);}if(obj){$thisDom.find("select")[level + 1].innerHTML = buildOption(getChildren(obj[opts.dataId]), opts.showConfig[level + 1].tipTitle);}}opts.commonChange($dom, level);if(isLast){opts.lastChange($thisDom.find("select:last"));}if(opts.isChosen){$thisDom.find("select").trigger("chosen:updated");}}var getLevel = function(obj, level){if(!level) level = 0;if(obj){if(obj[opts.dataPid] == opts.rootPid){return level;}else{return getLevel(getObj(obj[opts.dataPid]), ++level);}}}var setValue = function(obj, level){if(obj && level >= 0){$thisDom.find("select")[level].innerHTML = buildOption(getChildren(obj[opts.dataPid]), opts.showConfig[level].tipTitle, obj[opts.dataId]);setValue(getObj(obj[opts.dataPid]), --level);}else{return;}} var setDefault = function(id){var obj = getObj(id);if(obj){var level = getLevel(obj);setValue(obj, level);if(level == opts.showConfig.length - 1){opts.lastChange($thisDom.find("select:last"));}else{$thisDom.find("select")[level + 1].innerHTML = buildOption(getChildren(obj[opts.dataId]), opts.showConfig[level + 1].tipTitle);}}else{$thisDom.find("select")[0].innerHTML = buildOption(getChildren(opts.rootPid), opts.showConfig[0].tipTitle);}if(opts.isChosen){$thisDom.find("select").trigger("chosen:updated");}}var setDefaultValue = function(id){var values = [];if(id != -1 && opts.isMultiple){values = id.toString().split(opts.separator);setDefault(values[0]);var $options = $thisDom.find("select:last option");for(var o in $options){for(var v in values){if($options[o].value == values[v]){$options[o].selected = true;}}}if(opts.isChosen){$thisDom.find("select").trigger("chosen:updated");}}else{setDefault(id);}}this.setDefaultValue = setDefaultValue;//初始化資料var initData = function(){var html = [];var values = [];for(var i = 0; i < opts.showConfig.length; i++){html.push(‘<select class="form-control" level="‘+i+‘" style="width:‘+(opts.showConfig[i].width?opts.showConfig[i].width:width)+‘" ‘+(opts.showConfig[i].name?‘name="‘+opts.showConfig[i].name+‘"‘:‘‘)+‘><option value="">‘+opts.showConfig[i].tipTitle+‘</option></select>‘)}$thisDom.append(html.join(" "));if(opts.isDisabled){$thisDom.find("select").attr("disabled", true);}if(opts.isReadOnly){$thisDom.find("select").attr("readonly", true);}if(opts.defaultValue == -1 && $thisDom.attr(opts.valueAttr)){opts.defaultValue = $thisDom.attr(opts.valueAttr);}if(opts.isMultiple){$thisDom.find("select:last").attr("multiple", true);}setDefaultValue(opts.defaultValue);$thisDom.on("change", "select", function(event){change($(event.target));});if(opts.isChosen){$thisDom.find("select").chosen({search_contains : true,allow_single_deselect : false});}opts.initFinish();}//擷取資料var getData = function(url){if(!url){url = opts.url;}if(ldData[url]){return ldData[url];}else{$.ajax({url : url,async : false,dataType : "json",success : function(data){ldData[url] = data;}});return ldData[url];}}//外掛程式入口initData();}$.fn.createLd = function(param){return new ld($(this), param);}//省市區聯動$.fn.areaLd = function(param){var defaults = {url : "common/area/getAll.jhtml",//擷取資料的URLdataId : "areaId",//資料IDdataPid : "pid",//資料父IDrootPid : 0,//根節點PIDdataTitle : "${title}",//顯示出來的欄位showConfig : [{name:"province",tipTitle:"--省--"},{name:"city",tipTitle:"--市--"},{name:"area",tipTitle:"--區--"}]};var opts = $.extend(defaults, param);return new ld($(this), opts);}//行業類別聯動$.fn.tradeLd = function(param){var defaults = {url : "common/trade/getLdAll.jhtml",//擷取資料的URLdataId : "tid",//資料IDdataPid : "pid",//資料父IDdataTitle : "${tradename}",rootPid : 0,//根節點PIDshowConfig : [{tipTitle:"請選擇"},{tipTitle:"請選擇"}]};var opts = $.extend(defaults, param);return new ld($(this), opts);}})(jQuery);

jquery聯動下拉選項