阿尔卑斯山 2014-04-12
一个基于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
				}); 结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
本文实例讲述了php+ ajax 实现的写入数据库操作。分享给大家供大家参考,具体如下:。<input class="tel" type="text" placeholder="请输入您的手机号码&q