1.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>
</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>
</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>
</td>
</tr>
2.js
$("#addTax").click(function(){
/*加载省下拉选*/
$.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);
}
});
});
/*加载市下拉选*/
function getCity() {
var id = $("#province").val();
$("#city").empty();
$("#counties").empty();
$.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>";
});
$("#city").html(proHtml);
$("#counties").append("<option value='0' selected='selected' >" + '请选择' + "</option>");
},
error: function () {
alert("加载市失败");
}
});
}
/*加载地区下拉选*/
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("加载区失败");
}
});
}
function updateTax(id){
$("#province").empty();
$("#city").empty();
$("#counties").empty();
$.getJSON(adminPath+"/taxManage/querySysTaxById",{taxpayerId: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);
}
});
$.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>";
}
});
$("#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);
}
});
});
}
3.表
-- Create table
create table AREA
(
ID NUMBER not null,
AREAID VARCHAR2(50),
AREANAME VARCHAR2(60),
PID VARCHAR2(6),
TYPE NUMBER
)
tablespace USERS
pctfree 10
initrans 1
maxtrans 255
storage
(
initial 64
next 1
minextents 1
maxextents unlimited
);
4.思路
在页面初始化的时候把所有省分给加载到<select id="Province"></select>中;
当用户选择某一省份的时候,再把该省份下面的所有市加载到<select id="City"></select>中;
然后再选择某一个市再加载 该市下面的所有区县到<select id="County"></select>中;
当用户选择的 Province 发生改变时 后面的 City 和 County 清空重新加载;
6.后台(springmvc+spring)
action
/**
* 省市联动
*
*/
@Controller
@RequestMapping(value = "/${adminPath}/area")
public class SysAreaAction extends BaseAction{
@Autowired
private SysAreaBiz sysAreaBiz;
/**
* 获取省列表
*/
@RequestMapping(value="/getProvince")
@ResponseBody
public List<AreaEntity> getProvince(){
List<AreaEntity> areas=sysAreaBiz.queryAreas("",0);
return areas;
}
/**
* 获取市列表
*/
@RequestMapping(value="/getCity")
@ResponseBody
public List<AreaEntity> getCity(@RequestParam(value="id") String id){
List<AreaEntity> areas=sysAreaBiz.queryAreas(id,1);
return areas;
}
/**
* 获取县/区列表
*/
@RequestMapping(value="/getArea")
@ResponseBody
public List<AreaEntity> getArea(@RequestParam(value="id") String id){
List<AreaEntity> areas=sysAreaBiz.queryAreas(id,2);
return areas;
}
daoimpl
public List<AreaEntity> queryAreas(String pid, int type) {
String sql = "select a.* from tax_area a";
sql+= " where a.type="+ type;
if(StringUtils.isNotEmpty(pid)){
sql+= " and a.pid = '"+pid+"' ";
}
return this.jdbcTemplateOrcl.query(sql, new SysAreaRowMapper());
}
碰到问题:
shiroFilter 中加入只检查登录验证,不检查权限验证的地址 :
<property name="filters">
<map>
<entry key="authc">
<bean class="com.junxiao.xsoft.base.shiro.ShiroAuthc">
<!-- 只检查登录验证,不检查权限验证的地址 -->
<property name="URIOK">
<set>
中加入
<value>/${adminPath}/area</value>
</set>
</property>
</bean>
</entry>
</map>
</property>