自关联jquery无限级联下拉列表

本级联适用于：pid自关联数据结构，顶级的pid为0，子级的pid为父级的id.

 

/**
 * 功能描述：<br>
 * 城市级联js
 * @author gyx
 */
$(document).ready(function() {
	//========初始化分类========
	console.log("init...");
	var url="/community/getCountrys/";
	
	// --------全局默认显示-------
	// 默认格式 '{0}' 为自定义方法，用于替换指定字符串
	var defFmt = "<option value=\'-1\'>={0}=</option>";
	// 可设置某些ID的默认显示文本
	var nameMapping = {
			"defTxt"	:defFmt.format('请选择'),      // 默认选项
			"province"	:defFmt.format('省级区划'),    // 可选
			"city"		:defFmt.format('市级区划'),    // 可选
			"region"	:defFmt.format('区、县级区划'),// 可选
			"street"	:defFmt.format('街道'),        // 可选
			"community"	:defFmt.format('社区')         // 可选
	};
	
	// 定义初始化时自动加载的第一个下拉列表的ID
	var frist = $("#province");
	// 初始查询ID = 0
	if(frist.val()==0){
		callCountry(true, frist);
	}
	
	//=====================
	// province	city region	street
	// 切换省市区,绑定所有指定class的下拉列表change事件
	$("select[class='ocountry']").change(function() {
		callCountry(false, this);
	});
	
	
	/**
	 * 调用数据接口
	 * @param top 是否为顶级列表(初始化使用,用户控制数据是填充本元素还是子元素)
	 * @param obj 当前元素
	 */
	function callCountry(top, obj){
		var pid = $(obj).val();
		var nextId = $(obj).attr("next");
		if(pid !="" && pid != -1){
			$.post(url+pid, function(data){
				// 列表项填充
				setNode(top, obj, data.data, nextId);
			}, "json"); 
		}else{
			// 选中默认值重置所有子节点
			cleanNext(nextId);
		}
	}
	
	
	/**
	 * 填充当前节点并设置子节点
	 * @param top		是否为顶级列表
	 * @param obj		当前操作对象
	 * @param data		数据列表json返回
	 * @param nextId	下级元素ID
	 */
	function setNode(top, obj, data, nextId){
		var id = "";
		if(top){
			id = $(obj).attr("id");
		}else{
			id = nextId;
		}	
		$("#"+id).empty();// 移除子节点
		var defText = nameMapping[id];
		if(defText==undefined){
			defText = nameMapping.defTxt;
		}
		$(defText).appendTo("#"+id);   //添加一个默认项
		cleanNext(nextId); // 清空下级列表
		
		$.each(data, function(key, val) {
			// 将返回来的项添加到下拉菜单中
			$("<option value=\""+val.id+"\">"+val.name+"</option>").appendTo("#"+id);
		});
	}
	
	/**
	 * 重置下级列表为默认值
	 */
	function cleanNext(nextId){
		while (nextId!="" && nextId!=undefined){
			$("#"+nextId).empty();// 移除子节点
			var defText = nameMapping[nextId];
			if(defText==undefined){
				defText = nameMapping.defTxt;
			}
			$(defText).appendTo("#"+nextId);
			nextId = $("#"+nextId).attr("next");
		}
	}
});


/** 格式化输入字符串**/
//用法: "hello{0}".format('world')；返回'hello world'
String.prototype.format= function(){
  var args = arguments;
  return this.replace(/\{(\d+)\}/g,
  		function(s,i){
  			return args[i];
  		});
};

 

html:

需设置class为 'ocountry' 拦截change事件，并设置本级id与下一级的id属性

 

<select class='ocountry' id="province" next="city">
	<option value="0">=请选择=</option>
</select>
<select class='ocountry' id="city" next="region">
	<option value="-1">=请选择=</option>
</select>
<select class='ocountry' id="region" next="street">
	<option value="-1">=请选择=</option>
</select>
<select class='ocountry' id="street" next="community">
	<option value="-1">=请选择=</option>
</select>
<select class='ocountry' id="community" name="communityId">
	<option value="-1">=请选择=</option>
</select>