ajax实现三级下拉列表，不使用php

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

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.json',
                type: 'get',
                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.json',
                type: 'get',
                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>');
        }
    });
});

JSON 数据：

get_city.json

[
    {"id":1, "name":"北京市"},
    {"id":2, "name":"上海市"},
    {"id":3, "name":"广州市"},
    {"id":4, "name":"深圳市"}
    // 其他城市列表
]

get_district.json

[
    {"id":1, "name":"东城区"},
    {"id":2, "name":"西城区"},
    {"id":3, "name":"朝阳区"},
    {"id":4, "name":"海淀区"}
    // 其他地区列表
]

这个例子中，当省份下拉列表改变时，会触发 AJAX 请求，查询对应的城市列表并更新城市下拉列表。当城市下拉列表改变时，会触发另一个 AJAX 请求，查询对应的地区列表并更新地区下拉列表。两个 AJAX 请求都是通过访问 JSON 文件获取数据，因此不需要使用 PHP。