php三级联动代码

PHP三级联动代码

基础概念

PHP三级联动通常指的是在网页表单中实现三个下拉菜单（Select）的联动效果。例如，一个国家选择框，一个省份选择框，一个城市选择框。当选择一个国家时，省份选择框会更新为该国家的省份列表；当选择一个省份时，城市选择框会更新为该省份的城市列表。

类型

静态数据：预先定义好所有国家和省份城市的数据，通过PHP脚本进行数据处理和传递。
动态数据：通过数据库查询获取国家和省份城市的数据，实现更灵活的数据管理。

应用场景

注册表单：用户注册时选择所在地区。
订单处理：根据用户选择的地区进行物流配送。
数据分析：根据用户选择的地区进行市场分析。

示例代码

以下是一个简单的PHP三级联动示例，使用静态数据实现。

<?php
// 预定义的国家和省份城市数据
$countries = [
    'CN' => ['北京', '上海', '广东'],
    'US' => ['纽约', '洛杉矶', '芝加哥']
];

$provinces = [
    '北京' => ['东城区', '西城区', '朝阳区'],
    '上海' => ['黄浦区', '徐汇区', '长宁区'],
    '广东' => ['广州市', '深圳市', '珠海市'],
    '纽约' => ['曼哈顿', '布鲁克林', '皇后区'],
    '洛杉矶' => ['好莱坞', '圣塔莫尼卡', '长滩'],
    '芝加哥' => ['卢普区', '西郊', '北郊']
];

$cities = [
    '东城区' => ['东直门', '朝阳门', '建国门'],
    '西城区' => ['西直门', '复兴门', '阜成门'],
    '朝阳区' => ['三里屯', '望京', '酒仙桥'],
    '黄浦区' => ['外滩', '人民广场', '南京东路'],
    '徐汇区' => ['徐家汇', '漕河泾', '华泾镇'],
    '长宁区' => ['虹桥', '中山公园', '古北'],
    '广州市' => ['天河区', '越秀区', '海珠区'],
    '深圳市' => ['南山区', '福田区', '宝安区'],
    '珠海市' => ['香洲区', '斗门区', '金湾区'],
    '曼哈顿' => ['上西区', '中城', '下城'],
    '布鲁克林' => ['布鲁克林高地', '威廉斯堡', '迪克岛'],
    '皇后区' => ['法拉盛', '艾姆赫斯特', '杰克逊高地'],
    '好莱坞' => ['好莱坞山', '比弗利山', '西好莱坞'],
    '圣塔莫尼卡' => ['圣塔莫尼卡海滩', '威尼斯海滩', '玛丽安德尔湾'],
    '长滩' => ['长滩市中心', '海滨', '雷东多海滩'],
    '卢普区' => ['芝加哥大学', '千禧公园', '威利斯塔'],
    '西郊' => ['奥克帕克', '埃文斯顿', '内珀维尔'],
    '北郊' => ['斯科基', '阿灵顿高地', '格伦维尤']
];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP三级联动示例</title>
</head>
<body>
    <form method="post">
        国家: 
        <select name="country" onchange="updateProvinces(this.value)">
            <option value="">请选择国家</option>
            <?php foreach ($countries as $code => $country): ?>
                <option value="<?php echo $code; ?>"><?php echo $country[0]; ?></option>
            <?php endforeach; ?>
        </select>

        省份: 
        <select name="province" id="province" onchange="updateCities(this.value)">
            <option value="">请选择省份</option>
        </select>

        城市: 
        <select name="city">
            <option value="">请选择城市</option>
        </select>
    </form>

    <script>
        function updateProvinces(countryCode) {
            var provinceSelect = document.getElementById('province');
            provinceSelect.innerHTML = '<option value="">请选择省份</option>';
            var citySelect = document.getElementById('city');
            citySelect.innerHTML = '<option value="">请选择城市</option>';

            if (countryCode) {
                var provinces = <?php echo json_encode($provinces); ?>;
                for (var province in provinces[countryCode]) {
                    var option = document.createElement('option');
                    option.value = province;
                    option.text = province;
                    provinceSelect.add(option);
                }
            }
        }

        function updateCities(province) {
            var citySelect = document.getElementById('city');
            citySelect.innerHTML = '<option value="">请选择城市</option>';

            if (province) {
                var cities = <?php echo json_encode($cities); ?>;
                for (var city in cities[province]) {
                    var option = document.createElement('option');
                    option.value = city;
                    option.text = city;
                    citySelect.add(option);
                }
            }
        }
    </script>
</body>
</html>