Ajax实现三级联动
程序员文章站
2024-03-05 15:22:49
...
前言
demo的后台用的Servlet+JSP+JDBC+MVC的架构。（最近在学。。。）
数据库
在网上找的全国省市县的数据sql文件
https://pan.baidu.com/s/1TAc5AgsnbVbo8qqMDD2HlQ
提取码：demj
后端
后端随意编写，只要返回JSON数据即可。
前端
后端传回JSON格式。
<%--
Created by IntelliJ IDEA.
User: hetao
Date: 2020/4/2
Time: 10:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<body>
<div style="width: 1000px;margin: 200px auto auto;">
<label for="sheng">省</label><select name="" id="sheng" style="width: 200px;height: 30px;"></select>
<label for="city"> 市</label><select name="" id="city" style="width: 200px;height: 30px;"></select>
<label for="xian">县、区</label><select name="" id="xian" style="width: 200px;height: 30px;"></select></div>
</body>
<script>
$(function () {
$.get("area", {parent_id: "000000"}, function (data) {
const province = $("#sheng");
province.empty();
const area = eval("data=" + data);
for (let i = 0; i < area.length; i++) {
province.append("<option value='" + area[i].cri_code + "'>" + area[i].cri_name + "</option>");
}
});
$("#sheng").trigger("change");
})
//加载完成，添加监听事件
$("#sheng").change(function () {
//发起ajax请求
const parent_id = $("#sheng").val();
$.get("area", {parent_id: parent_id}, function (data) {
const city = $("#city");
city.empty();
const cites = eval("data="+data);
for (let i =0;i<cites.length;i++){
city.append("<option value='"+ cites[i].cri_code+"'>"+cites[i].cri_name+"</option>");
}
});
$("#city").trigger("change");
});
$("#city").change(function () {
const super_code = $("#city").val();
$.get("area",{parent_id:super_code},function (data) {
const xian = $("#xian");
xian.empty();
const xians = eval("data="+data);
for (let i=0;i<xians.length;i++){
xian.append("<option value='"+ xians[i].cri_code+"'>"+xians[i].cri_name+"</option>");
}
})
})
</script>
</html>
效果实现
下一篇： JQuery学习笔记（一）