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

最新推荐文章于 2024-06-04 15:06:11 发布

ArchitectDream

最新推荐文章于 2024-06-04 15:06:11 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/microopithecus/article/details/83044985

版权

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

摘要由CSDN通过智能技术生成

/*
 * 五级联动
 * 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='"+