实体类创建
省略set/get
**
* 行政区域县区信息表(TbAreas)实体类
*
*/
public class TbAreas implements Serializable {
private static final long serialVersionUID = 804755290838802035L;
/**
* 区域ID
*/
private String areaid;
/**
* 区域名称
*/
private String area;
}
public class TbCities implements Serializable {
private static final long serialVersionUID = 335480473685555694L;
/**
* 城市ID
*/
private String cityid;
/**
* 城市名称
*/
private String city;
}
public class TbProvinces implements Serializable {
private static final long serialVersionUID = -40667232618289266L;
/**
* 省份ID
*/
private String provinceid;
/**
* 省份名称
*/
private String province;
}
public class Pizze {
private List<TbProvinces> provinces;
private List<TbCities> cities;
private List<TbAreas> areas;
}
/*
这是用来组合集合的
*/
servlet
@WebServlet("/three")
public class ThreeServlet extends HttpServlet {
private ThreeUnionService threeUnionService = new ThreeUnionServiceImpl();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=UTF-8");
String proid = req.getParameter("proid");
String cityid = req.getParameter("cityid");
String method = req.getParameter("method");
switch (method){
case "getAllPro":
List<TbProvinces> allpro = threeUnionService.getAllpro();
List<TbCities> allCitys = threeUnionService.getAllCitys(Integer.parseInt("110000"));
List<TbAreas> allTbAreas = threeUnionService.getAllTbAreas(Integer.parseInt("110100"));
Pizze pizze = new Pizze(allpro, allCitys, allTbAreas);
String s = JSON.toJSONString(pizze);
resp.getWriter().write(s);
break;
case "getAllCitys":
List<TbCities> allCitys1 = threeUnionService.getAllCitys(Integer.parseInt(proid));
System.out.println(proid.substring(0,3)+"100");
List<TbAreas> allTbAreas1 = threeUnionService.getAllTbAreas(Integer.parseInt(proid.substring(0,3)+"100"));
Pizze pizze1 = new Pizze(null, allCitys1, allTbAreas1);
String s1 = JSON.toJSONString(pizze1);
resp.getWriter().write(s1);
break;
case "getArea":
List<TbAreas> allTbAreas2 = threeUnionService.getAllTbAreas(Integer.parseInt(cityid));
String s2 = JSON.toJSONString(allTbAreas2);
resp.getWriter().write(s2);
break;
default:
}
}
}
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function () {
//第一次初始化数据显示所有省，第一个省的所有市，第一个市的所有县
$.ajax({
type:'post',
url:'/three',
data:'method=getAllPro',
dataType:'json',
success:function (data) {
count=""
for (var i = 0; i < data.provinces.length; i++) {
count+="<option id="+data.provinces[i].provinceid+">"+data.provinces[i].province+"</option>"
}
$("#pro").html(count)
count=""
for (var i = 0; i < data.cities.length; i++) {
count+="<option id="+data.cities[i].cityid+">"+data.cities[i].city+"</option>"
}
$("#shi").html(count)
count=""
for (var i = 0; i < data.areas.length; i++) {
count+="<option id="+data.areas[i].areaid+">"+data.areas[i].area+"</option>"
}
$("#xian").html(count)
},
error:function () {
alert(2222)
}
})
})
$(function () {
//当监听到省发生改变发生，得到对应省的所有市，同时显示第一个市的所有县
$("#pro").change(function () {
var id = $(this).find("option:checked").attr("id")
$.ajax({
type:'post',
url:'/three',
data:'method=getAllCitys&proid='+id,
dataType:'json',
success:function (data) {
//显示对应的市
count=""
for (var i = 0; i < data.cities.length; i++) {
count+="<option id="+data.cities[i].cityid+">"+data.cities[i].city+"</option>"
}
$("#shi").html(count)
count=""
for (var i = 0; i < data.areas.length; i++) {
count+="<option id="+data.areas[i].areaid+">"+data.areas[i].area+"</option>"
}
$("#xian").html(count)
}
})
})
})
$(function () {
//当监听到市发生改变去找他对应的所有县
$("#shi").change(function () {
var id = $("#shi").find("option:checked").attr("id")
$.ajax({
type:'post',
url:"/three",
data:'method=getArea&cityid='+id,
dataType:'json',
success:function (data) {
var count=""
for (var i = 0; i < data.length; i++) {
count+="<option id="+data[i].areaid+">"+data[i].area+"</option>"
}
$("#xian").html(count)
}
})
})
})
</script>
<title>三级联动</title>
</head>
<body>
<h2> 三级联动</h2>
省 <select name="" id="pro">
</select>
市 <select name="" id="shi">
</select>
县/区 <select name="" id="xian">
</select>
</body>
</html>
jdbc代码就不贴了，就是根据id查数据库保存到集合即可
若有问题希望各位师傅斧正，小弟在此先行谢过
附数据库
提取码：2eaz
