mysql全国城市三级联动

基础概念

MySQL是一种关系型数据库管理系统，广泛应用于各种Web应用程序中。全国城市三级联动通常指的是省、市、区/县的三级行政区划数据的联动选择。这种功能在前端页面上通常通过下拉菜单实现，用户可以选择省份，然后根据省份显示对应的市，再选择市后显示对应的区/县。

类型

静态数据：将所有行政区划数据存储在数据库中，前端通过AJAX请求获取数据并动态生成下拉菜单。
动态数据：通过API接口实时获取行政区划数据，适用于数据更新频繁的场景。

应用场景

Web应用：如政府网站、电商平台、社交平台等需要用户选择地址的场景。
移动应用：如地图导航、外卖配送、快递服务等需要用户选择地址的场景。

示例代码

假设我们有一个MySQL数据库，表结构如下：

CREATE TABLE provinces (
    id INT PRIMARY KEY,
    name VARCHAR(50)
);

CREATE TABLE cities (
    id INT PRIMARY KEY,
    province_id INT,
    name VARCHAR(50),
    FOREIGN KEY (province_id) REFERENCES provinces(id)
);

CREATE TABLE districts (
    id INT PRIMARY KEY,
    city_id INT,
    name VARCHAR(50),
    FOREIGN KEY (city_id) REFERENCES cities(id)
);

前端HTML代码：

<select id="province">
    <option value="">请选择省份</option>
</select>

<select id="city" disabled>
    <option value="">请选择城市</option>
</select>

<select id="district" disabled>
    <option value="">请选择区/县</option>
</select>

JavaScript代码（使用jQuery）：

$(document).ready(function() {
    // 加载省份
    $.ajax({
        url: '/api/provinces',
        type: 'GET',
        success: function(data) {
            $.each(data, function(index, province) {
                $('#province').append($('<option>', {
                    value: province.id,
                    text: province.name
                }));
            });
        }
    });

    // 省份选择变化
    $('#province').change(function() {
        var provinceId = $(this).val();
        $('#city').empty().append($('<option>', {
            value: '',
            text: '请选择城市'
        })).prop('disabled', true);
        $('#district').empty().append($('<option>', {
            value: '',
            text: '请选择区/县'
        })).prop('disabled', true);

        if (provinceId) {
            $.ajax({
                url: '/api/cities?province_id=' + provinceId,
                type: 'GET',
                success: function(data) {
                    $.each(data, function(index, city) {
                        $('#city').append($('<option>', {
                            value: city.id,
                            text: city.name
                        }));
                    });
                    $('#city').prop('disabled', false);
                }
            });
        }
    });

    // 城市选择变化
    $('#city').change(function() {
        var cityId = $(this).val();
        $('#district').empty().append($('<option>', {
            value: '',
            text: '请选择区/县'
        })).prop('disabled', true);

        if (cityId) {
            $.ajax({
                url: '/api/districts?city_id=' + cityId,
                type: 'GET',
                success: function(data) {
                    $..json.each(data, function(index, district) {
                        $('#district').append($('<option>', {
                            value: district.id,
                            text: district.name
                        }));
                    });
                    $('#district').prop('disabled', false);
                }
            });
        }
    });
});