一个基于jquery下拉框插件:
-
支持无限级联
-
ajax异步请求
本不想重复造轮子,但是网上找的类似插件代码都比较多,所以干脆就个人写一个,直接贴代码
/** * 无限级联异步加载下拉框插件 * author:vakinge * */ ;(function($) { // 异步加载下拉框 $.fn.asnycSelect = function(options) { return this.each(function(){ new asnycSelect().builder($(this),options); }); }; function asnycSelect(){ this.settings = { linkage:false,//是否联动菜单 actionUrl:null,//请求地址 valtarget:null,//值输出元素(选择的值最终保存在) params:'',//初始查询参数:多个用“-”隔开 level: 1, maxlevel:null,//最大级 默认:2 }; this.builder = function($target,options){ options = $.extend(this.settings,options); var $subSelect,settings = this.settings; $target.attr("level",settings.level).empty(); $.getJSON(settings.actionUrl + settings.params, function(data){ if(!data || !data.opts)return; $target.append("<option value=''>请选择</option>"); data = data.opts; for(var i in data){ $target.append("<option value='"+i+"'>"+data[i]+"</option>"); } var linkNext = settings.linkage && settings.maxlevel > settings.level; if(linkNext){ $subSelect = $target.clone().empty().insertAfter($target); } $target.on('change',function(){ $(settings.valtarget).val($(this).val()); if(!linkNext)return; options.level = parseInt($(this).attr("level")) + 1; options.params = $(this).val(); $subSelect.asnycSelect(options); }); }); }; }; })(jQuery);
?使用例子:
$('.J_area_select').asnycSelect({ linkage:true, actionUrl:'http://www.smhaochi.com/', valtarget:'#selecdArea', params:'0', maxlevel:2 }); $('.J_type_select').asnycSelect({ linkage:true, actionUrl:'http://www.unetzone.com/', valtarget:'#selecdType', params:'0', maxlevel:2 });
?同步发布:http://my.oschina.net/vakinge/blog/221480