前端：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动title>
head>
<body>
<script src="jquery.js" type="text/javascript">script>
<script type="text/javascript">
$(function () {
let provinceSelect = $("#province");
let citySelect = $("#city");
let countrySelect = $("#country");
//浏览器加载完毕发送ajax请求，获取所有省份到下拉列表
$.ajax({
dataType:"json",
type:"get",
url:"/xmm/province",
async:true,
data:"t="+new Date(),
success:function (json) {
let html = "";
for (let i = 0; i < json.length; i++) {
myJson = json[i];
html += "+myJson.cityname+">";
}
provinceSelect.html(html);
}
})
//省下拉框选择完毕后执行该事件，获取市
provinceSelect[0].onchange = function () {
$.ajax({
dataType:"json",
type:"get",
url:"/xmm/province",
data:"t="+new Date()+"&id="+provinceSelect[0].value,
async:true,
success:function (json) {
let html = "";
for (let i = 0; i < json.length; i++) {
myJson = json[i];
html += "+myJson.cityname+">";
}
citySelect.html(html);
}
})
}
//市下拉列表框选择完毕后执行该事件，获取区
citySelect[0].onchange = function () {
$.ajax({
dataType:"json",
type:"get",
url:"/xmm/province",
data:"t="+new Date()+"&id="+this.value,
async:true,
success:function (json) {
let html = "";
for (let i = 0; i < json.length; i++) {
myJson = json[i];
html += "+myJson.cityname+">";
}
countrySelect.html(html);
}
})
}
})
script>
请选择所在省：
<select id="province">
<option value="">---请选择省份---option>
select><br/>
请选择所在市：
<select id="city">
<option value="">---请选择所在市---option>
select><br/>
请选择所在区：
<select id="country">
<option value="">---请选择所在直辖区---option>
select><br/>
body>
html>
后端：
package provinceAndcity;
import com.alibaba.fastjson.JSON;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;
@WebServlet("/province")
public class ProvinceServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
ResourceBundle rb = ResourceBundle.getBundle("jdbc");
Connection con = null;
PreparedStatement pre = null;
ResultSet rs = null;
List<ProvinceJSON> list = new ArrayList();
try {
Class.forName(rb.getString("driver"));
con = DriverManager.getConnection(rb.getString("url"),rb.getString("username"),rb.getString("password"));
if (request.getParameter("id") == null){//查询省
pre = con.prepareStatement("select cityname, id from city where type='1'");
}else{//根据前端返回值查询市区
pre = con.prepareStatement("select cityname, id from city where pid= ? ");
pre.setString(1,request.getParameter("id"));
}
rs = pre.executeQuery();
while(rs.next()){
int id = rs.getInt("id");
String cityname = rs.getString("cityname");
ProvinceJSON province = new ProvinceJSON(id,cityname);
list.add(province);
}
String jsons = JSON.toJSONString(list);
out.print(jsons);
} catch (Exception e) {
e.printStackTrace();
}finally {
if (rs != null) {
try {
rs.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (pre != null) {
try {
pre.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (con != null) {
try {
con.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
}
}