Ajax案例——省市县/区三级联动选择框

以下是一个简化的示例，展示了如何使用jQuery和Ajax创建一个省市县/区三级联动选择框。

HTML部分：

<select id="province">
    <option value="">请选择省份</option>
</select>
<select id="city">
    <option value="">请选择城市</option>
</select>
<select id="district">
    <option value="">请选择区域</option>
</select>

JavaScript部分（使用jQuery）：

$(document).ready(function() {
    $('#province').change(function() {
        var provinceId = $(this).val();
        if (provinceId) {
            $.ajax({
                url: 'get_cities.php',
                type: 'GET',
                data: { province_id: provinceId },
                success: function(cities) {
                    $('#city').html(cities);
                    $('#district').html('<option value="">请选择区域</option>');
                }
            });
        } else {
            $('#city').html('<option value="">请选择城市</option>');
            $('#district').html('<option value="">请选择区域</option>');
        }
    });
 
    $('#city').change(function() {
        var cityId = $(this).val();
        if (cityId) {
            $.ajax({
                url: 'get_districts.php',
                type: 'GET',
                data: { city_id: cityId },
                success: function(districts) {
                    $('#district').html(districts);
                }
            });
        } else {
            $('#district').html('<option value="">请选择区域</option>');
        }
    });
});

这里假设有两个PHP脚本get_cities.php和get_districts.php来处理Ajax请求并返回对应的HTML选项。

get_cities.php示例：

<?php
$provinceId = $_GET['province_id'];
// 这里应该有数据库查询操作来获取城市列表
$cities = "<option value=''>请选择城市</option>";
// 假设$cities是从数据库获取的城市列表
echo $cities;
?>

get_districts.php示例：

<?php
$cityId = $_GET['city_id'];
// 这里应该有数据库查询操作来获取区域列表
$districts = "<option value=''>请选择区域</option>";
// 假设$districts是从数据库获取的区域列表
echo $districts;
?>

这个简化的例子演示了如何使用jQuery和Ajax来实现省市县/区三级联动选择框的基本功能。在实际应用中，你需要将Ajax请求指向正确的后端脚本，并且后端脚本需要处理数据库查询以返回相应的选项列表。