三级联动获取json数据

三级联动通常指的是在前端页面上，有三个下拉选择框（select），它们之间存在级联关系。当用户选择一个选项时，下一个下拉框会根据前一个的选择动态更新其选项。这种交互模式常用于地区选择（省-市-区）、分类筛选等场景。

基础概念

JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。

类型与应用场景

静态JSON：预先定义好的数据，如配置文件。
动态JSON：通过API请求实时获取的数据，如三级联动中的地区数据。

应用场景包括但不限于：

地区选择器
分类筛选器
动态表单生成

示例代码

以下是一个简单的三级联动实现示例，使用JavaScript和jQuery来处理AJAX请求和DOM操作。

HTML部分

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

JavaScript部分

$(document).ready(function() {
    // 初始化省份数据
    $.getJSON('path_to_province_data.json', function(data) {
        $.each(data, function(index, item) {
            $('#province').append($('<option>', { 
                value: item.id,
                text : item.name 
            }));
        });
    });

    // 省份改变时加载城市数据
    $('#province').change(function() {
        var provinceId = $(this).val();
        $('#city').empty().append('<option value="">请选择城市</option>');
        $('#district').empty().append('<option value="">请选择区县</option>');
        if(provinceId) {
            $.getJSON('path_to_city_data.json?provinceId=' + provinceId, function(data) {
                $.each(data, function(index, item) {
                    $('#city').append($('<option>', { 
                        value: item.id,
                        text : item.name 
                    }));
                });
            });
        }
    });

    // 城市改变时加载区县数据
    $('#city').change(function() {
        var cityId = $(this).val();
        $('#district').empty().append('<option value="">请选择区县</option>');
        if(cityId) {
            $.getJSON('path_to_district_data.json?cityId=' + cityId, function(data) {
                $.each(data, function(index, item) {
                    $('#district').append($('<option>', { 
                        value: item.id,
                        text : item.name 
                    }));
                });
            });
        }
    });
});