js城市三级联动数据库

基础概念

城市三级联动通常指的是在前端页面上实现省、市、区（县）三个层级的下拉菜单联动效果。用户在选择省份时，市级下拉菜单会更新为该省份对应的城市列表；选择城市时，区（县）级下拉菜单会更新为该城市对应的区（县）列表。

类型与应用场景

静态数据：适用于行政区划不经常变动的场景，可以直接将数据硬编码在前端代码中。
动态数据：适用于需要实时更新行政区划信息的场景，通过后端接口从数据库获取最新数据。

实现步骤与示例代码

数据库设计

假设我们有一个简单的数据库表 regions，包含以下字段：

id：区域ID
name：区域名称
parent_id：父级区域ID（省为0，市为省的ID，区为市的ID）

后端接口

提供一个API接口，用于根据父级ID查询子区域列表。

# 示例使用Flask框架
from flask import Flask, jsonify

app = Flask(__name__)

regions = [
    {"id": 1, "name": "广东省", "parent_id": 0},
    {"id": 2, "name": "广州市", "parent_id": 1},
    {"id": 3, "name": "深圳市", "parent_id": 1},
    {"id": 4, "name": "天河区", "parent_id": 2},
    {"id": 5, "name": "越秀区", "parent_id": 2},
    {"id": 6, "name": "福田区", "parent_id": 3},
]

@app.route('/regions/<int:parent_id>', methods=['GET'])
def get_regions(parent_id):
    return jsonify([r for r in regions if r['parent_id'] == parent_id])

if __name__ == '__main__':
    app.run(debug=True)

前端实现

使用JavaScript和AJAX请求后端接口，动态更新下拉菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市三级联动</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>
    <select id="district">
        <option value="">请选择区（县）</option>
    </select>

    <script>
        $(document).ready(function() {
            // 初始化省份数据
            $.get('/regions/0', function(data) {
                data.forEach(function(province) {
                    $('#province').append(`<option value="${province.id}">${province.name}</option>`);
                });
            });

            // 省份选择变化时更新城市数据
            $('#province').change(function() {
                var provinceId = $(this).val();
                $('#city').empty().append('<option value="">请选择城市</option>');
                $('#district').empty().append('<option value="">请选择区（县）</option>');
                if (provinceId) {
                    $.get(`/regions/${provinceId}`, function(data) {
                        data.forEach(function(city) {
                            $('#city').append(`<option value="${city.id}">${city.name}</option>`);
                        });
                    });
                }
            });

            // 城市选择变化时更新区（县）数据
            $('#city').change(function() {
                var cityId = $(this).val();
                $('#district').empty().append('<option value="">请选择区（县）</option>');
                if (cityId) {
                    $.get(`/regions/${cityId}`, function(data) {
                        data.forEach(function(district) {
                            $('#district').append(`<option value="${district.id}">${district.name}</option>`);
                        });
                    });
                }
            });
        });
    </script>
</body>
</html>