1. 程式人生 > >js動態省市縣鄉村的聯動詳細介紹

js動態省市縣鄉村的聯動詳細介紹

/*
 * 五級聯動
 * provId 省下拉框的id  為了擺放拼接的字串
 * cityId 市下拉框的id
 * countyId 縣下拉框的id
 * townId 鄉下拉框的id
 * villageId 村拉框的id 
 * dataprovId 為了返回資料時有預設的選中狀態的值
 * datacityId cityParentId 市的父級id :省的id 一下是為了修改返回資料時下拉框有內容
 * datacountyId countyParentId 縣的父級id
 * datatownId townParentId 鄉的父級id
 * datavillageId villageParentId 村的父級id
 */
function showRegion(provId, cityId, countyId, townId, villageId,dataprovId, datacityId,
		datacountyId, datatownId, datavillageId) {
	/*
	 * 存放市縣鄉村的父級id
	 */
	var cityParentId = dataprovId;//市的父級id :省的id 一下是為了修改返回資料時下拉框有內容
	var countyParentId= datacityId;//縣的父級id
	var townParentId= datacountyId;//鄉的父級id
	var villageParentId= datatownId;//村的父級id
	/*
	 * 來搜尋省
	 */
	 searchByParentid(provId);
	// stringOption(providlist, provId);
	if (cityParentId != null) {
		//預設選定給定的內容
		$("#"+provId).val(dataprovId);
		//$("#"+provId+" option[value='"+dataprovId+"']").attr("selected", "selected")
		//$("#prov option[value='13']").prop("selected", "selected");
		//$("#prov").val("13");
		//$("#prov option:contains('河北省')").attr("selected", true);
		//$("#prov").get(0).selectedIndex = 13;
		//$("#prov").find("option[value='13']").attr("selected",true);
		//為了搜尋出當前資料
		searchByParentid(cityId,cityParentId);
		//預設選定給定的內容
		$("#"+cityId).val(datacityId);
	}
	if (countyParentId != null) {
		//為了搜尋出所需省市縣的內容
		searchByParentid(countyId,countyParentId);
		//預設選定給定的內容
		$("#"+countyId).val(datacountyId);
	}
	if (townParentId != null) {
		//為了搜尋出所需省市縣的內容
		searchByParentid(townId,townParentId);
		//預設選定給定的內容
		$("#"+townId).val(datatownId);
	}
	if (villageParentId != null) {//為了搜尋出所需省市縣的內容
		searchByParentid(villageId,villageParentId);
		//預設選定給定的內容
		$("#"+villageId).val(datavillageId);
	}

	/*
	 * 省變化載入市
	 */
	changeRegion(provId, cityId)
	/*
	 * 省變化載入市
	 */
	changeRegion(cityId, countyId)

	/*
	 * 省變化載入市
	 */
	changeRegion(countyId, townId)
	/*
	 * 省變化載入市
	 */
	changeRegion(townId, villageId)

}
/*
 * 根據父id搜尋資料list id 搜尋出資料後襬放的位置 Parentid 根據父級id來搜尋
 */
function searchByParentid(id, Parentid) {
	myajax = $.ajax({
		type : "post",
		url : basePath + "/region/searchByparentId.do",
		async: false,
		dataType : 'json',
		data : {
			re_parent : Parentid,
		},
		success : function(data) {
			var options = "";
			$.each(data, function(index, item) {
				options += "<option value=" + item.id + ">" + item.re_name
						+ "</option>";
			});
			$("#" + id).html(options);
			
		},
		error : function(data, type, err) {
			alert("錯誤型別:" + type + "; 錯誤資訊:" + err);
		}
	});
}
/*
 * 通過遍歷來進行拼接option下拉框
 */
function stringOption(data, id) {
	var options = "";
	$.each(data, function(index, item) {
		options += "<option value=" + item.id + ">" + item.re_name
				+ "</option>";
	});
	$("#" + id).html(options);
}
/*
 * 下拉框改變 後 搜尋下一級的資料 id是改變的下拉框id nextid是下一級的id
 */
function changeRegion(id, nextid) {
	$("#" + id).change(function() {
		var parentId = $("#" + id).val();
		// alert(a);
		alert(parentId);
		searchByParentid(nextid, parentId);
	});
}
showRegion("prov", "city", "county", "town", "village","13","1302","130205","130205002");