1.数据库实体,在原来基础上加一个是否是直辖市的标志位
public class AreaEntity {
@Key
private int id; //主键
private String areaId; //地区码
private String areaName; //地区名称
private String pid; //父地区码
private int type; //地区类型 0为省级 1为市级 2为县级
private int municipality; //是否是直辖市 0为直辖市 1为非直辖市
}
2.jsp
<tr>
<td style="width: 110px;" align="right">所属省份: </td>
<td>
<select class="select" name="province" id="province" οnchange="getCity()" style="width: 228px;height: 28px;border: 1px solid #d3d3d3;">
</select>
<font color="red">*</font>
</td>
</tr>
<tr>
<td style="width: 110px;" align="right"> 所属市级: </td>
<td>
<select class="select" name="city" id="city" οnchange="getArea()" style="width: 228px;height: 28px;border: 1px solid #d3d3d3;">
</select>
<font color="red">*</font>
</td>
</tr>
<tr>
<td style="width: 110px;" align="right"> 所属县区: </td>
<td>
<select class="select" name="counties" id="counties" style="width: 228px;height: 28px;border: 1px solid #d3d3d3;">
</select>
<font color="red">*</font>
</td>
</tr>
3.js 部分修改较多
新增时的脚本:
a.初始化
/*加载省下拉选*/
$.ajax({
type: "post",
url: adminPath+"/area/getProvince",
dataType: "json",
success: function (data) {
console.log(data);
var proHtml = '<option value="0">请选择</option>';
$.each(data, function (index, value) {
proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
});
$("#province").html(proHtml);
}
});
b. 选择省时
/*加载市下拉选*/
function getCity() {
var id = $("#province").val();
var provinceName = $("#province").find("option:selected").text();
$("#city").empty();
$("#counties").empty();
$.getJSON(adminPath+"/area/getProvinceById",{id:id}, function(prodata){
$.ajax({
type: "post",
url: adminPath+"/area/getCity",
data: {"id": id},
success: function (data) {
console.log(data);
var proHtml = "<option value='0' selected='selected' >" + '请选择' + "</option>";
$.each(data, function (index, value) {
proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
});
if(prodata.municipality=='1'){
$("#city").html(proHtml);
$("#counties").append("<option value='0' selected='selected' >" + '请选择' + "</option>");
}else{
$("#city").append("<option value="+id+">"+provinceName+"</option>");
$("#counties").html(proHtml);
}
},
error: function () {
alert("加载市失败");
}
});
});
}
c.选择区时
/*加载地区下拉选*/
function getArea() {
var id = $("#city").val();
$("#counties").empty();
$.ajax({
type: "post",
url: adminPath+"/area/getArea",
data: {"id": id},
success: function (data) {
console.log(data);
var proHtml = "<option value='0' selected='selected' >" + '请选择' + "</option>";
$.each(data, function (index, value) {
proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
});
$("#counties").html(proHtml);
},
error: function () {
alert("加载区失败");
}
});
}
修改时的脚本
$.getJSON(adminPath+"/Manage/querySysById",{payerId:id}, function(data){
$.ajax({
type: "post",
url: adminPath+"/area/getProvince",
dataType: "json",
success: function (dataPro) {
console.log(dataPro);
var proHtml = '<option value="0">请选择</option>';
$.each(dataPro, function (index, value) {
if(value.areaId == data.province){
proHtml += "<option selected=\"selected\" value="+value.areaId+">"+value.areaName+"</option>";
}else{
proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
}
});
$("#province").html(proHtml);
}
});
//分情况,直辖市与非直辖市
$.getJSON(adminPath+"/area/getProvinceById",{id:data.province}, function(prodata){
$.ajax({
type: "post",
url: adminPath+"/area/getCity",
data: {"id": data.province},
success: function (dataCity) {
console.log(dataCity);
var proHtml = "<option value='0' >" + '请选择' + "</option>";
$.each(dataCity, function (index, value) {
if(value.areaId == data.city){
proHtml += "<option selected=\"selected\" value="+value.areaId+">"+value.areaName+"</option>";
}else{
proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
}
});
if(prodata.municipality=='1'){
$("#city").html(proHtml);
$.ajax({
type: "post",
url: adminPath+"/area/getArea",
data: {"id": data.city},
success: function (dataArea) {
console.log(dataArea);
var proHtml = "<option value='0'>" + '请选择' + "</option>";
$.each(dataArea, function (index, value) {
if(value.areaId == data.counties){
proHtml += "<option selected=\"selected\" value="+value.areaId+">"+value.areaName+"</option>";
}else{
proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
}
});
$("#counties").html(proHtml);
}
});
}else{
$("#city").append("<option value="+id+">"+prodata.areaName+"</option>");
$("#counties").html(proHtml);
}
},
error: function () {
alert("加载市失败");
}
});
});
4.后台修改
action 新增:
/**
* 获取省信息
*/
@RequestMapping(value="/getProvinceById")
@ResponseBody
public AreaEntity getProvinceById(@RequestParam(value="id") String id){
AreaEntity areas=sysAreaBiz.getProvinceById(id);
return areas;
}
daoimpl 新增:
@Override
public AreaEntity getProvinceById(String id) {
String sql = "select a.* from tax_area a where a.ID= " + id;
return jdbcTemplateOrcl.queryForObject(sql, new SysAreaRowMapper());
}
至此,可以了。
此文主要记录,处理省份为直辖市时,市部分select也为直辖市名称。