省市县 三级联动

省市区数据库级联查询

前端代码：

<div class="row cl">
					<label class="form-label col-xs-4 col-sm-2"><span
						class="c-red">*</span>地区：</label>
					<div class="formControls col-xs-8 col-sm-9">
					<input type="hidden" name="regionId" id="regionId" value="${aVehDate.regionId }">
					<input type="hidden" name="xzqhdm" id="xzqhdm" value="${aVehDate.xzqhdm }">
						<span>
							<select id="region1" class="custom-select" onchange="return selectRegion('region1','region2','regionId');">
								 <option value="-1">请选择</option>
							</select>
							<select style="width:100px;" id="region2" class="custom-select" onchange="return selectRegion('region2','region3','regionId');">
							 <option value="-1" >请选择</option>
							</select>
							<select style="width:100px;" id="region3" class="custom-select" onchange="return selectRegion('region3','region4','regionId');">
							 <option value="-1">请选择</option>
							</select>
						</span>
					</div>
				</div>

js:

/**
 * 查询地区
 * 
 * @param currId
 *            当前元素的Iid
 * @param tarId
 *            目标元素的Id
 * @param finiId
 *            最终存储值的id
 * @returns
 */
function selectRegion(currId, tarId, finiId) {
	console.log(projectName);
	var curr = $("#" + currId);
	var parentId = "0";
	var strs = new Array();
	strs = curr.val().split("_");
	if (curr != 'undefined' && strs.length > 1) {
		parentId = strs[0];
	}

	/* 如果取不到值 */
	if (parentId == '') {
		parentId = "0";
	}
	if (tarId == '') {
		return false;
	}

	if (finiId != '') {
		$("#" + finiId).val(parentId);
		$("#xzqhdm").val(strs[1]);
	}

	var tar = $("#" + tarId);
	/* ajax请求服务器,获取json数据 */
	$.post(

	/* "/usersCenter-web-head/" + "/outer/client/regionList.htm", */
			projectName + "/back/outer/regionList.htm", "json={'id':'"
			+ parentId + "'}", function(data) {
		if (data.code == '0') {
			var region = data.data.one;

			/*
			 * 拼装的目标HMTL <option value='-1'>请选择</option>
			 */
			var childrenList = region.childrenList;
			var resSb = "<option value='-1'>请选择</option>";
			if(currId =="region1"){
				$("#region3").html(resSb);
			}
			for (var i = 0; i < region.childrenList.length; i++) {
				var regionTemp = childrenList[i];
				resSb += "<option id='" + regionTemp.id + "' value='"
						+ regionTemp.id + "_" + regionTemp.areacode + "'>"
						+ regionTemp.name + "</option>";
			}

			// alert(resSb);
			tar.html(resSb);
		} else {
			console.error(data.info);
		}
	}, 'json');
	return false;
}

/**
 * 查询地区update用
 * 
 * @returns
 */
function updataRegion() {
	var region1 = $("#region1");
	var region2 = $("#region2");
	var region3 = $("#region3");
	var fin = $("#regionId").val();
	var parentId = fin;

	/* 如果取不到值 */
	if (parentId == '') {
		parentId = "0";
	}

	/* ajax请求服务器,获取json数据 */
	$.post(

	/* "/usersCenter-web-head/" + "/outer/client/regionList.htm", */
			projectName + "/back/outer/regionList.htm", "json={'id':'"
			+ parentId + "'}", function(data) {
		if (data.code == '0') {
			var region = data.data.one;

			/*
			 * 拼装的目标HMTL <option value='-1'>请选择</option>
			 */
			var childrenList = region.treeRegion[0].childrenList;
			var childrensList = region.treeRegion[1].childrenList;
			var parentRegion = region.parentRegion;
			var shengId = region.parentRegion.parentRegion.id;
			var optionDom = $("#" + shengId).attr('selected', 'selected');
			//二级菜单拼接
			var resSb = "";
			//三级菜单拼接
			var renSb = "";
			for (var i = 0; i < childrenList.length; i++) {
				var regionTemp = childrenList[i];
				if (childrenList[i].id == parentRegion.id) {
					resSb += "<option selected = 'selected' value='"
							+ regionTemp.id + "_" + regionTemp.areacode + " '>"
							+ regionTemp.name + " </option>";
				} else {
					resSb += "<option value='" + regionTemp.id + "_"
							+ regionTemp.areacode + "'>" + regionTemp.name
							+ "</option>";
				}
			}
			for (var i = 0; i < childrensList.length; i++) {
				var regionTemp = childrensList[i];
				if (childrensList[i].id == parentId) {
					renSb += "<option selected = 'selected' value='"
							+ regionTemp.id + "_" + regionTemp.areacode + " '>"
							+ regionTemp.name + " </option>";
				} else {
					renSb += "<option value='" + regionTemp.id + "_"
							+ regionTemp.areacode + "'>" + regionTemp.name
							+ "</option>";
				}

			}

			// alert(resSb);
			region2.html(resSb);
			region3.html(renSb);
		} else {
			console.error(data.info);
		}
	}, 'json');
	return false;
}


/**
 * info详细页面地址显示：省市县
 * @returns
 */
function infoRegion() {
	var regionName = $("#regionName");
	var fin = $("#regionId").val();
	var parentId = fin;

	/* 如果取不到值 */
	if (parentId == '') {
		parentId = "0";
	}

	/* ajax请求服务器,获取json数据 */
	$.post(

	/* "/usersCenter-web-head/" + "/outer/client/regionList.htm", */
			projectName + "/back/outer/regionList.htm", "json={'id':'"
			+ parentId + "'}", function(data) {
		if (data.code == '0') {
			var region = data.data.one;

			/*
			 * 拼装的目标HMTL <option value='-1'>请选择</option>
			 */
			var childrensList = region.treeRegion[1].childrenList;
			//省
			var province =region.parentRegion.parentRegion.name;
			//市
			var city =region.parentRegion.name;
			for (var i = 0; i < childrensList.length; i++) {
				var regionTemp = childrensList[i];
				if (childrensList[i].id == parentId) {
					regionName.html(province+city+regionTemp.name);
				}
			}

			// alert(resSb);
		} else {
			console.error(data.info);
		}
	}, 'json');
	return false;
}

控制层代码就是一个查询数据库的：
关于全国地区表数据链接：a_region.sql
数据库中包含省份 城市 区/市/县 通过父类id进行关联分级

----------------------补充一点东西：--------------------------------
因为我没有放控制层代码。是因为控制层是访问的接口。
说一下js中那一段

有些人说不知道这一段是啥。数据库中也没有。
这是在pojo实体类中定义的 子类的实体类集合

这个吧~ 在mapper中写个关联查询就行