一个非常简洁基于jquery原创无限级联ajax异步请求下拉框插件

阿尔卑斯山 2014-04-12

一个基于jquery下拉框插件:

  1. 支持无限级联

  2. 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

相关推荐

mmywcoco / 0评论 2020-06-06