一个非常简洁基于jquery原创无限级联ajax异步请求下拉框插件
一个基于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 });
相关推荐
TONIYH 2020-07-22
83510998 2020-07-18
wcqwcq 2020-06-26
delmarks 2020-06-14
ppsurcao 2020-06-14
tthappyer 2020-06-07
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03