省市区三级联动菜单
一、首先是JSP页面:
<%@ page pageEncoding="utf-8"%>
<html>
<head>
<title>省市级三级联动菜单</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
//页面加载后
$.get("${pageContext.request.contextPath}/pro/queryAllProvince",
function(res) {
for (var i = 0; i < res.length; i++) {
$("#selProvince").append(
$("<option value='"+res[i].code+"'>"+ res[i].name + "</option>")
);
}
$("selProvince").change();
}, "json");
//给selProvince,绑定change事件
$("#selProvince").change(function(){
// 发ajax 根据选中的省,查其下的 市
$.get("${pageContext.request.contextPath}/pro/queryAllCityByPro",
"procode="+$(this).val(),
function(res){
$("#selCity").empty(); // 清空原内容
for(var i=0; i<res.length; i++){
$("#selCity").append($("<option value='"+res[i].code+"'>"+res[i].name+"</option>"));
}
$("#selCity").change();
},
"json");
});
$("#selCity").change(function(){
$.get("${pageContext.request.contextPath}/pro/queryAllAreaByCity",
"cityid="+$("#selCity").val(),
function (res) {
$("#selArea").empty();
//$("#selArea").find("option").remove();
//$("select[id='selArea']").empty();
for(var i=0; i<res.length; i++){
$("#selArea").append($("<option value='"+res[i].code+"'>"+res[i].name+"</option>"));
}
},
"json");
});
});
</script>
</head>
<body>
<select id="selProvince"></select>
<select id="selCity"></select>
<select id="selArea"></select>
</body>
</html>
二、Action层代码:
//成员变量接受参数
private String procode;
private String cityid;
//查询所有的省
public String queryAllProvince() throws Exception {
ProvinceService provinceService = new ProvinceServiceImpl();
List<Province> provincelist = provinceService.queryAllProvince();
String jsonString = JSON.toJSONString(provincelist);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(jsonString);
return null;
}
//根据选择的省查询市
public String queryAllCityByPro() throws Exception {
System.out.println("-----------"+procode);
CityService cityService = new CityServiceImpl();
List<City> queryAllCityByPro = cityService.queryAllCityByPro(procode);
String jsonString = JSON.toJSONString(queryAllCityByPro);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(jsonString);
return null;
}
//根据选择市查询区
public String queryAllAreaByCity() throws Exception {
AreaService areaService = new AreaServiceImpl();
List<Area> queryAllAreaByCity = areaService.queryAllAreaByCity(cityid);
String jsonString = JSON.toJSONString(queryAllAreaByCity);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(jsonString);
return null;
}
public String getProcode() {
return procode;
}
public void setProcode(String procode) {
this.procode = procode;
}
public String getCityid() {
return cityid;
}
public void setCityid(String cityid) {
this.cityid = cityid;
}
三、数据库建表:
-- 表的结构 province
CREATE TABLE province (
id numeric(11) primary key,
code varchar2(6) NOT NULL,
name varchar2(30) NOT NULL
)
-- 表的结构 city
CREATE TABLE city (
id numeric(11) primary key,
code varchar2(6) NOT NULL,
name varchar2(50) NOT NULL,
provincecode varchar2(6) NOT NULL
)
-- 表的结构 area
CREATE TABLE area (
id numeric(11) primary key,
code varchar2(6) NOT NULL,
name varchar2(50) NOT NULL,
citycode varchar2(6) NOT NULL
)
省、市、区三张数据表的部分截图:
省份表:
城市表:
区县表:
四、效果图: