前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<title>全国城市三级联动</title>
<style type="text/css">
.bb {
height: 100px;
}
h1 {
color: red;
}
.box {
border: 1px solid rgb(71, 67, 67);
height: 200px;
width: 500px;
margin: auto;
text-align: center;
}
</style>
<script type="text/javascript">
var sel1 = document.getElementsByClassName("province");
var sel2 = document.getElementsByClassName("city");
var sel3 = document.getElementsByClassName("town");
//加载所有的省份
function selectPro() {
//创建xmlHttprequest对象
var req = new XMLHttpRequest();
req.open("get", "QueryServlet?dowhat=selectPro", true);
req.send();
//接受数据
req.onreadystatechange = function() {
var data = req.responseText;
var obj = eval(data);
//动态添加数据
if (req.readyState == 4 && req.status == 200) {
for (var i in obj) {
var opt = document.createElement("option");
opt.innerHTML = obj[i];
sel1[0].appendChild(opt);
opt = sel1[0].children[0];
}
}
}
}
//立即执行
selectPro();
//加载所有的市
function selectCity() {
sel2[0].options.length = 1;
sel3[0].options.length = 1;
var opt = sel1[0].children;
//创建xmlHttprequest对象
var req = new XMLHttpRequest();
for (i = 0; i < opt.length; i++) { //下拉框的长度就是它的选项数.
if (opt[i].selected == true) {
var pname = opt[i].text; //获取当前选择项的文本.
console.log(pname);
req.open("get", "QueryServlet?dowhat=selectCity&pname=" + pname, true);
req.send();
req.onreadystatechange = function() {
var data = req.responseText;
var obj = eval(data);
//动态添加数据
if (req.readyState == 4 && req.status == 200) {
for (var i in obj) {
var opt = document.createElement("option");
opt.innerHTML = obj[i];
//console.log(i + "==" + obj[i]);
sel2[0].appendChild(opt);
opt = sel2[0].children[0];
}
}
}
}
}
}
//加载所有的县
function selectTown() {
sel3[0].options.length = 1;
var opt = sel2[0].children;
//创建xmlHttprequest对象
var req = new XMLHttpRequest();
for (i = 0; i < opt.length; i++) { //下拉框的长度就是它的选项数.
if (opt[i].selected == true) {
var cname = opt[i].text; //获取当前选择项的文本.
console.log(cname);
req.open("get", "QueryServlet?dowhat=selectTown&cname=" + cname, true);
req.send();
req.onreadystatechange = function() {
var data = req.responseText;
var obj = eval(data);
//动态添加数据
if (req.readyState == 4 && req.status == 200) {
for (var i in obj) {
var opt = document.createElement("option");
opt.innerHTML = obj[i];
//console.log(i + "==" + obj[i]);
sel3[0].appendChild(opt);
opt = sel3[0].children[0];
}
}
}
}
}
}
</script>
</head>
<body>
<div class="bb"></div>
<div class="box">
<h1>全国城市三级联动</h1>
<select name="province" class="province" onchange="selectCity()">
<option class="one">省份</option>
</select> <select name="city" class="city" onchange="selectTown()">
<option>地级市</option>
</select> <select name="town" class="town">
<option>市、县级市</option>
</select>
</div>
</body>
</html>servlet代码
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
QueryService service=new QueryService();
//查询数据
String dowhat=req.getParameter("dowhat");
//System.out.println(dowhat);
if ("selectPro".equals(dowhat)) {
List<String>proList=service.getProName();
String json=JSON.toJSONString(proList);
resp.getWriter().print(json);
}else if ("selectCity".equals(dowhat)) {
String pname=req.getParameter("pname");
List<String>cityList=service.getCityNameByProCode(pname);
String json=JSON.toJSONString(cityList);
resp.getWriter().print(json);
}else if ("selectTown".equals(dowhat)) {
String cname=req.getParameter("cname");
List<String>townList=service.getTownNameByCityCode(cname);
String json=JSON.toJSONString(townList);
resp.getWriter().print(json);
}方法
//获取所有的省份
public List<String> getProName() {
List<String>proList=new ArrayList<String>();
Connection con=null;
PreparedStatement ps=null;
ResultSet rs=null;
try {
con=MySQLContent.getConnect();
String sql="select t_address_province.name from t_address_province";
ps=con.prepareStatement(sql);
rs=ps.executeQuery();
while (rs.next()) {
proList.add(rs.getString("name"));
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
MySQLContent.closeAll(rs, ps, con);
}
return proList;
}
//获取所有的市的名字
public List<String> getCityNameByProCode(String pname) {
List<String>cityList=new ArrayList<String>();
Connection con=null;
PreparedStatement ps=null;
ResultSet rs=null;
try {
con=MySQLContent.getConnect();
String sql="SELECT t_address_city.name FROM t_address_city WHERE t_address_city.provinceCode = (select code from t_address_province WHERE name=?)";
ps=con.prepareStatement(sql);
ps.setString(1, pname);
rs=ps.executeQuery();
while (rs.next()) {
cityList.add(rs.getString("name"));
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
MySQLContent.closeAll(rs, ps, con);
}
return cityList;
}
//获取所有的县的名字
public List<String> getTownNameByCityCode(String cname) {
List<String>townList=new ArrayList<String>();
Connection con=null;
PreparedStatement ps=null;
ResultSet rs=null;
try {
con=MySQLContent.getConnect();
String sql="SELECT t_address_town.`name` FROM t_address_town WHERE t_address_town.cityCode=(SELECT `code` FROM t_address_city WHERE `name`=?)";
ps=con.prepareStatement(sql);
ps.setString(1, cname);
rs=ps.executeQuery();
while (rs.next()) {
townList.add(rs.getString("name"));
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
MySQLContent.closeAll(rs, ps, con);
}
return townList;
}
数据库连接代码都是死套路，可以自己写也可以看我的数据库连接https://blog.csdn.net/qq_41534115/article/details/83272484