ajax实现省市县三级联动

前言
demo的后台用的Servlet+JSP+JDBC+MVC的架构。(最近在学。。。)

数据库

在网上找的全国省市县的数据sql文件
https://pan.baidu.com/s/1TAc5AgsnbVbo8qqMDD2HlQ
提取码:demj
ajax实现省市县三级联动_第1张图片

后端

后端随意编写,只要返回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(" + area[i].cri_name + "");
            }
        });
        $("#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("+cites[i].cri_name+"");
           }

        });

        $("#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("+xians[i].cri_name+"");
            }
        })
    })

</script>
</html>


效果实现

ajax实现省市县三级联动_第2张图片

你可能感兴趣的:(JavaEE)