js动态省市县乡村的联动详细介绍支持默选

本文详细介绍了如何使用JavaScript实现动态的省市县乡村四级联动效果,支持默认值选择。通过创建下拉列表,并结合事件监听,实现实时更新选项,为前端开发提供实用的解决方案。
/*
 * 五级联动
 * 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");

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值