php 地址联动

PHP 地址联动基础概念

地址联动通常指的是在前端页面上实现省市县三级联动的下拉菜单，用户选择上一级地区时，下一级地区会自动更新显示相应的选项。这种功能常用于表单填写、地址选择等场景。

类型

静态数据：预先定义好省市县的数据，存储在数据库或JSON文件中。
动态数据：通过API从服务器获取最新的地址数据。

应用场景

电商平台的收货地址选择
社交平台的注册地址选择
物流系统的地址录入

实现步骤

准备数据：准备省市县的数据，可以是静态的JSON文件，也可以是动态从数据库或API获取。
前端实现：使用HTML和JavaScript实现联动效果。
后端支持：提供API接口，供前端调用获取地址数据。

示例代码

前端代码（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址联动示例</title>
</head>
<body>
    <select id="province" onchange="loadCities(this.value)">
        <option value="">请选择省份</option>
    </select>
    <select id="city" onchange="loadCounties(this.value)">
        <option value="">请选择城市</option>
    </select>
    <select id="county">
        <option value="">请选择区县</option>
    </select>

    <script>
        const provinces = [
            { id: '1', name: '广东省' },
            { id: '2', name: '湖南省' }
        ];

        const cities = {
            '1': [
                { id: '1-1', name: '广州市' },
                { id: '1-2', name: '深圳市' }
            ],
            '2': [
                { id: '2-1', name: '长沙市' },
                { id: '2-2', name: '岳阳市' }
            ]
        };

        const counties = {
            '1-1': [
                { id: '1-1-1', name: '天河区' },
                { id: '1-1-2', name: '越秀区' }
            ],
            '1-2': [
                { id: '1-2-1', name: '南山区' },
                { id: '1-2-2', name: '福田区' }
            ],
            '2-1': [
                { id: '2-1-1', name: '芙蓉区' },
                { id: '2-2-2', name: '天心区' }
            ],
            '2-2': [
                { id: '2-2-1', name: '岳阳楼区' },
                { id: '2-2-2', name: '君山区' }
            ]
        };

        function loadProvinces() {
            const provinceSelect = document.getElementById('province');
            provinces.forEach(province => {
                const option = document.createElement('option');
                option.value = province.id;
                option.textContent = province.name;
                provinceSelect.appendChild(option);
            });
        }

        function loadCities(provinceId) {
            const citySelect = document.getElementById('city');
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            const countySelect = document.getElementById('county');
            countySelect.innerHTML = '<option value="">请选择区县</option>';

            if (provinceId) {
                cities[provinceId].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city.id;
                    option.textContent = city.name;
                    citySelect.appendChild(option);
                });
            }
        }

        function loadCounties(cityId) {
            const countySelect = document.getElementById('county');
            countySelect.innerHTML = '<option value="">请选择区县</option>';

            if (cityId) {
                counties[cityId].forEach(county => {
                    const option = document.createElement('option');
                    option.value = county.id;
                    option.textContent = county.name;
                    countySelect.appendChild(option);
                });
            }
        }

        loadProvinces();
    </script>
</body>
</html>

后端代码（PHP）

<?php
header('Content-Type: application/json');

$provinces = [
    ['id' => '1', 'name' => '广东省'],
    ['id' => '2', 'name' => '湖南省']
];

$cities = [
    '1' => [
        ['id' => '1-1', 'name' => '广州市'],
        ['id' => '1-2', 'name' => '深圳市']
    ],
    '2' => [
        ['id' => '2-1', 'name' => '长沙市'],
        ['id' => '2-2', 'name' => '岳阳市']
    ]
];

$counties = [
    '1-1' => [
        ['id' => '1-1-1', 'name' => '天河区'],
        ['id' => '1-1-2', 'name' => '越秀区']
    ],
    '1-2' => [
        ['id' => '1-2-1', 'name' => '南山区'],
        ['id' => '1-2-2', 'name' => '福田区']
    ],
    '2-1' => [
        ['id' => '2-1-1', 'name' => '芙蓉区'],
        ['id' => '2-1-2', 'name' => '天心区']
    ],
    '2-2' => [
        ['id' => '2-2-1', 'name' => '岳阳楼区'],
        ['id' => '2-2-2', 'name' => '君山区']
    ]
];

$action = $_GET['action'];

if ($action == 'provinces') {
    echo json_encode($provinces);
} elseif ($action == 'cities' && isset($_GET['provinceId'])) {
    echo json_encode($cities[$_GET['provinceId']]);
} elseif ($action == 'counties' && isset($_GET['cityId'])) {
    echo json_encode($counties[$_GET['cityId']]);
}
?>