省市区数据库级联查询
前端代码:
<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中写个关联查询就行