php数据二级联动如何实现省市级联下拉菜单？

adminZpd 专业教程 2025-12-21 04:00:56

PHP数据二级联动是一种常见的前后端交互技术,主要用于实现两个关联下拉框的联动效果，在选择省份后，城市下拉框自动加载对应省份的城市数据，这种技术广泛应用于表单填写、数据筛选等场景，能够提升用户体验并减少数据冗余，实现PHP数据二级联动需要前端与后端的紧密配合，涉及HTML、JavaScript和PHP等技术。

php数据二级联动如何实现省市级联下拉菜单？-第1张图片-99系统专家

前端基础结构

前端部分需要两个下拉框,分别用于一级选项和二级选项，一级下拉框通常包含静态数据或通过AJAX动态加载，而二级下拉框的初始状态为空，等待用户选择一级选项后触发数据加载，以下是一个简单的前端HTML结构示例：

<select id="province">
    <option value="">请选择省份</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>
<select id="city">
    <option value="">请选择城市</option>
</select>

JavaScript事件监听

为了实现联动效果,需要为一级下拉框添加change事件监听器，当用户选择一级选项时，JavaScript会发送AJAX请求到后端，获取对应的二级数据并填充到二级下拉框中，以下是使用原生JavaScript的示例代码：

document.getElementById('province').addEventListener('change', function() {
    var provinceId = this.value;
    var citySelect = document.getElementById('city');
    // 清空二级下拉框
    citySelect.innerHTML = '<option value="">请选择城市</option>';
    if (provinceId) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'get_cities.php?province_id=' + provinceId, true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                var cities = JSON.parse(xhr.responseText);
                cities.forEach(function(city) {
                    var option = document.createElement('option');
                    option.value = city.id;
                    option.textContent = city.name;
                    citySelect.appendChild(option);
                });
            }
        };
        xhr.send();
    }
});

后端PHP数据处理

后端PHP脚本负责接收前端请求,查询数据库并返回JSON格式的数据，以get_cities.php为例，该脚本会根据省份ID查询对应的城市列表，以下是PHP代码示例：

<?php
header('Content-Type: application/json');
$provinceId = $_GET['province_id'];
// 假设使用MySQL数据库
$host = 'localhost';
$dbname = 'test';
$user = 'root';
$pass = '';
try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
    $stmt = $pdo->prepare("SELECT id, name FROM cities WHERE province_id = ?");
    $stmt->execute([$provinceId]);
    $cities = $stmt->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($cities);
} catch (PDOException $e) {
    echo json_encode([]);
}
?>