ajax实现三级下拉列表，源码

以下是一个简单的三级下拉列表的 AJAX 实现代码示例：

HTML 代码：

<select id="province">
    <option value="">请选择省份</option>
    <option value="1">北京市</option>
    <option value="2">上海市</option>
    <option value="3">广东省</option>
    <!-- 其他省份选项 -->
</select>

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

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

JavaScript 代码：

$(document).ready(function() {
    // 当省份下拉列表改变时触发 AJAX 请求
    $('#province').change(function() {
        var province_id = $(this).val();
        if (province_id != '') {
            $.ajax({
                url: 'get_city.php',
                type: 'post',
                data: {province_id: province_id},
                dataType: 'json',
                success: function(data) {
                    var options = '<option value="">请选择城市</option>';
                    for (var i = 0; i < data.length; i++) {
                        options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                    }
                    $('#city').html(options);
                    $('#district').html('<option value="">请选择地区</option>');
                },
                error: function() {
                    alert('获取城市列表失败！');
                }
            });
        } else {
            $('#city').html('<option value="">请选择城市</option>');
            $('#district').html('<option value="">请选择地区</option>');
        }
    });

    // 当城市下拉列表改变时触发 AJAX 请求
    $('#city').change(function() {
        var city_id = $(this).val();
        if (city_id != '') {
            $.ajax({
                url: 'get_district.php',
                type: 'post',
                data: {city_id: city_id},
                dataType: 'json',
                success: function(data) {
                    var options = '<option value="">请选择地区</option>';
                    for (var i = 0; i < data.length; i++) {
                        options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                    }
                    $('#district').html(options);
                },
                error: function() {
                    alert('获取地区列表失败！');
                }
            });
        } else {
            $('#district').html('<option value="">请选择地区</option>');
        }
    });
});

PHP 代码：

get_city.php

<?php
// 获取城市列表
$province_id = $_POST['province_id'];
// 根据省份 ID 查询城市列表，这里假设已经查询到了 $city_list 数组
$city_list = array(
    array('id' => 1, 'name' => '北京市'),
    array('id' => 2, 'name' => '上海市'),
    array('id' => 3, 'name' => '广州市'),
    array('id' => 4, 'name' => '深圳市'),
    // 其他城市列表
);
echo json_encode($city_list);
?>

get_district.php

<?php
// 获取地区列表
$city_id = $_POST['city_id'];
// 根据城市 ID 查询地区列表，这里假设已经查询到了 $district_list 数组
$district_list = array(
    array('id' => 1, 'name' => '东城区'),
    array('id' => 2, 'name' => '西城区'),
    array('id' => 3, 'name' => '朝阳区'),
    array('id' => 4, 'name' => '海淀区'),
    // 其他地区列表
);
echo json_encode($district_list);
?>

这个例子中，当省份下拉列表改变时，会触发 AJAX 请求，查询对应的城市列表并更新城市下拉列表。当城市下拉列表改变时，会触发另一个 AJAX 请求，查询对应的地区列表并更新地区下拉列表。