如图:
注: 此为从数据库中查询的省市区数据, 如果需要不涉及后台的JS实现省市区三级联动, 可查看:
html部分:
所在省市区:--选择省份--
--选择城市--
--选择地区--
js部分:
省市区通过异步查询数据库获得. 其中,DISTRICT_ID为省/市/区的id,PARENT_ID为省/市/区的父id。例如:区的父id就是市的id,市的父id就是省的id。
var areaInfo = {};
$(function() {
// 加载城市
$("#province").change(function() {
var curProvince = $(this).val();
if (curProvince !== "") {
areaInfo.loadCity(curProvince);
} else {
$("#city").empty().append('--请选择城市--');
$("#county").empty().append('--请选择地区--');
}
});
// 加载地区
$("#city").change(function() {
var curCity = $(this).val(); //
if (curCity !== "") {
areaInfo.loadCounty(curCity);
}
});
//-----------------------------------------------------------
// 加载省份
areaInfo.loadProvince = function() {
HttpPost("/district/getAreadistrict.do", {
level : 1
}, function(data) {
data = data.data;
for ( var i = 0; i < data.length; i++) {
$("#province").append(
''
+ data[i].DISTRICTNAME + '');
}
});
};
// 加载城市
areaInfo.loadCity = function(pid) {
$("#city").empty().append('--请选择城市--');
$("#county").empty().append('--请选择地区--');
HttpPost("/district/getAreadistrict.do", {
level : 2,
parentID : pid
}, function(data) {
data = data.data;
for ( var i = 0; i < data.length; i++) {
$("#city").append(
''
+ data[i].DISTRICTNAME + '');
}
});
};
// 加载地区
areaInfo.loadCounty = function(cid) {
$("#county").empty().append('--请选择地区--');
$("#county option[value='']").attr("selected", true);
HttpPost("/district/getAreadistrict.do", {
level : 3,
parentID : cid
}, function(data) {
data = data.data;
for ( var i = 0; i < data.length; i++) {
$("#county").append(
''
+ data[i].DISTRICTNAME + '');
}
});
};
});
struts配置文件:
text/html;charset=UTF-8
jsonModelMap
DistrictAction.java:
public String getAreadistrict(){
String level = this.request.getParameter("level");
String parentID = this.request.getParameter("pid");
List areadistrictJson =districtService.getAreadistrictJson(level,parentID);
HashMap resultMap = new HashMap();
resultMap.put("data", areadistrictJson);
setJsonModelMap(resultMap);
return SUCCESS;
}
对应Ibatis的映射文件内容:
from MG_UC_DISTRICT t
]]>
1 = 1
AND t.district_level = #{level}
AND t.PARENT_ID = #{pid}
AND t.PARENT_ID is null