当前位置 : 主页 > 网络编程 > JavaScript >

ajax联动select

来源:互联网 收集:自由互联 发布时间:2021-07-03
一级select选择后,ajax加载二级select选项 1. [代码] [JavaScript]代码 /** * 基于ajax的二级动态联动选择 * 2016-08-03 EricLin * * 参数说明: * target:联动的二级选择框 * url:数据来源,数据返回格式
一级select选择后,ajax加载二级select选项

1. [代码][JavaScript]代码    

/**
 * 基于ajax的二级动态联动选择
 * 2016-08-03 EricLin
 * 
 * 参数说明:
 * target:	联动的二级选择框
 * url:		数据来源,数据返回格式示例[{"name":"中国银行","id":1}],如果无数据返回一对双引号("")即可
 * tip:		提示文字,其值为空,可扩展为传入默认值
 * 目前调用方式:在一级选择框的onchange事件中调用此方法,实现联动
 * 后期功能扩展:
 * 	1)绑定一级选择框的onchange事件,简便调用时的写法
 * 	2)支持多级联动
 *  3)支持联动时默认选择某选项
 * @param $
 */
(function($){ 
	$.fn.linkageSelect=function(settings){ 
		var target = settings.target,
			url	= settings.url,
			tip = settings.tip;
		$.getJSON(url, function(data){
			var items = [];
			items.push('<option class="get-class" value="">'+tip+'</option>');
			$.each(data, function(key, val) {
			    items.push('<option value="' + val.id + '">' + val.name + '</li>');
			});
			$(target).html(items);
		});
	}
})(jQuery);
网友评论