PHP基础 + Ajax实现三级联动

PHP基础 + Ajax实现三级联动

三级联动是指在网页中的三个下拉框之间存在关联关系，选择一个下拉框的选项后，会动态更新另外两个下拉框的选项。在这个示例中，我们将使用PHP和Ajax来实现三级联动。

首先，我们需要创建一个数据库表来存储三级联动的数据。假设我们有一个名为locations的表，包含三个字段：id、name和parent_id。id字段是主键，name字段存储地区名称，parent_id字段存储地区的父级ID。

接下来，我们需要创建一个包含三个下拉框的HTML表单。每个下拉框都有一个唯一的ID，并且第一个下拉框的选项是从数据库中获取的。

<form>
    <select id="country" name="country">
        <option value="">请选择国家</option>
        <?php
        // 从数据库中获取国家列表
        $countries = getCountries();
        foreach ($countries as $country) {
            echo "<option value='" . $country['id'] . "'>" . $country['name'] . "</option>";
        }
        ?>
    </select>
    <select id="province" name="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city" name="city">
        <option value="">请选择城市</option>
    </select>
</form>

接下来，我们需要编写一个JavaScript函数，用于处理下拉框的变化事件，并使用Ajax来获取下一个下拉框的选项。

<script>
    // 当国家下拉框的选项改变时触发
    $('#country').change(function () {
        var countryId = $(this).val();
        if (countryId !== '') {
            // 使用Ajax获取省份列表
            $.ajax({
                url: 'getProvinces.php',
                type: 'POST',
                data: {countryId: countryId},
                dataType: 'json',
                success: function (response) {
                    // 清空省份和城市下拉框的选项
                    $('#province').empty();
                    $('#city').empty();
                    // 添加省份选项
                    $('#province').append('<option value="">请选择省份</option>');
                    $.each(response, function (key, value) {
                        $('#province').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                }
            });
        } else {
            // 清空省份和城市下拉框的选项
            $('#province').empty();
            $('#city').empty();
            // 添加省份和城市的默认选项
            $('#province').append('<option value="">请选择省份</option>');
            $('#city').append('<option value="">请选择城市</option>');
        }
    });

    // 当省份下拉框的选项改变时触发
    $('#province').change(function () {
        var provinceId = $(this).val();
        if (provinceId !== '') {
            // 使用Ajax获取城市列表
            $.ajax({
                url: 'getCities.php',
                type: 'POST',
                data: {provinceId: provinceId},
                dataType: 'json',
                success: function (response) {
                    // 清空城市下拉框的选项
                    $('#city').empty();
                    // 添加城市选项
                    $('#city').append('<option value="">请选择城市</option>');
                    $.each(response, function (key, value) {
                        $('#city').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                }
            });
        } else {
            // 清空城市下拉框的选项
            $('#city').empty();
            // 添加城市的默认选项
            $('#city').append('<option value="">请选择城市</option>');
        }
    });
</script>

最后，我们需要编写两个PHP文件getProvinces.php和getCities.php，用于处理Ajax请求并返回相应的省份和城市列表。

getProvinces.php的代码如下：

<?php
// 获取国家ID
$countryId = $_POST['countryId'];

// 从数据库中获取省份列表
$provinces = getProvinces($countryId);

// 将省份列表转换为JSON格式并返回
echo json_encode($provinces);
?>

getCities.php的代码如下：

<?php
// 获取省份ID
$provinceId = $_POST['provinceId'];

// 从数据库中获取城市列表
$cities = getCities($provinceId);

// 将城市列表转换为JSON格式并返回
echo json_encode($cities);
?>

以上就是使用PHP和Ajax实现三级联动的基本步骤。通过这种方式，当用户选择一个下拉框的选项时，其他下拉框的选项会自动更新，从而实现三级联动效果。