如何基于多筛选器选择在页面上分组并展示JSON数据？

需求说明 #

现有基于JSON数据的国家-州-城市三级联动下拉筛选器，需要在用户选择筛选条件后，页面展示选中项的JSON数据，以及对应分组内的其他关联数据。

完整代码实现 #

HTML #

添加结果展示区域，用于显示筛选后的相关数据：

<div class="container" style="width:600px;">
    <select name="country" id="country" class="form-control input-lg">
        <option value="">选择国家</option>
    </select>
    <br />
    <select name="state" id="state" class="form-control input-lg">
        <option value="">选择州/省</option>
    </select>
    <br />
    <select name="city" id="city" class="form-control input-lg">
        <option value="">选择城市</option>
    </select>
    <br />
    <!-- 新增结果展示区域 -->
    <div id="result" class="well" style="margin-top:20px;"></div>
</div>

JavaScript #

优化数据请求逻辑（缓存JSON数据避免重复请求），添加筛选结果展示函数：

$(document).ready(function() {
    let jsonData = null; // 缓存JSON数据

    // 先加载数据并初始化国家下拉框
    $.getJSON('./data/country_state_city.json', function(data) {
        jsonData = data;
        load_json_data('country');
    });

    function load_json_data(id, parent_id) {
        let html_code = '';
        if (!jsonData) return;

        html_code += `<option value="">选择${id === 'country' ? '国家' : id === 'state' ? '州/省' : '城市'}</option>`;
        $.each(jsonData, function(key, value) {
            if (id === 'country') {
                if (value.parent_id === '0') {
                    html_code += `<option value="${value.id}">${value.name}</option>`;
                }
            } else {
                if (value.parent_id === parent_id) {
                    html_code += `<option value="${value.id}">${value.name}</option>`;
                }
            }
        });
        $('#' + id).html(html_code);
        // 每次更新下拉框后触发结果展示
        displaySelectedData();
    }

    // 展示选中数据及关联分组数据
    function displaySelectedData() {
        const countryId = $('#country').val();
        const stateId = $('#state').val();
        const cityId = $('#city').val();
        let resultHtml = '';

        if (!countryId) {
            resultHtml = '<p>请选择国家开始筛选</p>';
            $('#result').html(resultHtml);
            return;
        }

        // 获取选中的国家数据
        const selectedCountry = jsonData.find(item => item.id === countryId);
        // 获取该国家下所有州/省
        const statesInCountry = jsonData.filter(item => item.parent_id === countryId);

        resultHtml += `<h4>选中的国家：</h4>`;
        resultHtml += `<pre>${JSON.stringify(selectedCountry, null, 2)}</pre>`;
        resultHtml += `<h4>该国家下所有州/省：</h4>`;
        resultHtml += `<pre>${JSON.stringify(statesInCountry, null, 2)}</pre>`;

        if (stateId) {
            // 获取选中的州/省数据
            const selectedState = jsonData.find(item => item.id === stateId);
            // 获取该州/省下所有城市
            const citiesInState = jsonData.filter(item => item.parent_id === stateId);

            resultHtml += `<h4>选中的州/省：</h4>`;
            resultHtml += `<pre>${JSON.stringify(selectedState, null, 2)}</pre>`;
            resultHtml += `<h4>该州/省下所有城市：</h4>`;
            resultHtml += `<pre>${JSON.stringify(citiesInState, null, 2)}</pre>`;
        }

        if (cityId) {
            // 获取选中的城市数据
            const selectedCity = jsonData.find(item => item.id === cityId);

            resultHtml += `<h4>选中的城市：</h4>`;
            resultHtml += `<pre>${JSON.stringify(selectedCity, null, 2)}</pre>`;
        }

        $('#result').html(resultHtml);
    }

    // 国家下拉框变化事件
    $(document).on('change', '#country', function() {
        const country_id = $(this).val();
        if (country_id !== '') {
            load_json_data('state', country_id);
        } else {
            $('#state').html('<option value="">选择州/省</option>');
            $('#city').html('<option value="">选择城市</option>');
        }
        displaySelectedData();
    });

    // 州/省下拉框变化事件
    $(document).on('change', '#state', function() {
        const state_id = $(this).val();
        if (state_id !== '') {
            load_json_data('city', state_id);
        } else {
            $('#city').html('<option value="">选择城市</option>');
        }
        displaySelectedData();
    });

    // 城市下拉框变化事件
    $(document).on('change', '#city', function() {
        displaySelectedData();
    });
});

JSON数据（country_state_city.json） #

[
 {
  "id":"1",
  "name":"美国",
  "parent_id":"0"
 }, 
 {
  "id":"2",
  "name":"加拿大",
  "parent_id":"0"
 }, 
 {
  "id":"3",
  "name":"澳大利亚",
  "parent_id":"0"
 }, 
 {
  "id":"4",
  "name":"纽约州",
  "parent_id":"1"
 }, 
 {
  "id":"5",
  "name":"阿拉巴马州",
  "parent_id":"1"
 }, 
 {
  "id":"6",
  "name":"加利福尼亚州",
  "parent_id":"1"
 }, 
 {
  "id":"7",
  "name":"安大略省",
  "parent_id":"2"
 }, 
 {
  "id":"8",
  "name":"不列颠哥伦比亚省",
  "parent_id":"2"
 }, 
 {
  "id":"9",
  "name":"新南威尔士州",
  "parent_id":"3"
 }, 
 {
  "id":"10",
  "name":"昆士兰州",
  "parent_id":"3"
 }, 
 {
  "id":"11",
  "name":"纽约市",
  "parent_id":"4"
 }, 
 {
  "id":"12",
  "name":"布法罗",
  "parent_id":"4"
 }, 
 {
  "id":"13",
  "name":"奥尔巴尼",
  "parent_id":"4"
 }, 
 {
  "id":"14",
  "name":"伯明翰",
  "parent_id":"5"
 }, 
 {
  "id":"15",
  "name":"蒙哥马利",
  "parent_id":"5"
 }, 
 {
  "id":"16",
  "name":"亨茨维尔",
  "parent_id":"5"
 }, 
 {
  "id":"17",
  "name":"洛杉矶",
  "parent_id":"6"
 }, 
 {
  "id":"18",
  "name":"旧金山",
  "parent_id":"6"
 }, 
 {
  "id":"19",
  "name":"圣迭戈",
  "parent_id":"6"
 }, 
 {
  "id":"20",
  "name":"多伦多",
  "parent_id":"7"
 }, 
 {
  "id":"21",
  "name":"渥太华",
  "parent_id":"7"
 }, 
 {
  "id":"22",
  "name":"温哥华",
  "parent_id":"8"
 }, 
 {
  "id":"23",
  "name":"维多利亚",
  "parent_id":"8"
 }, 
 {
  "id":"24",
  "name":"悉尼",
  "parent_id":"9"
 }, 
 {
  "id":"25",
  "name":"纽卡斯尔",
  "parent_id":"9"
 }, 
 {
  "id":"26",
  "name":"布里斯班市",
  "parent_id":"10"
 }, 
 {
  "id":"27",
  "name":"黄金海岸",
  "parent_id":"10"
 }
]

功能说明 #

1. 数据缓存：仅第一次请求JSON数据，后续操作使用缓存数据，提升性能
2. 联动逻辑：选择国家后加载对应州/省，选择州/省后加载对应城市，未选择上级时清空下级选项
3. 结果展示：
   • 选择国家后，显示选中国家的JSON数据及该国家下所有州/省
   • 选择州/省后，额外显示选中州/省的JSON数据及该州/省下所有城市
   • 选择城市后，再额外显示选中城市的JSON数据
4. 格式化展示：使用<pre>标签格式化JSON数据，便于阅读

内容的提问来源于stack exchange，提问作者Khan