如何基于多级筛选器动态分组并展示 JSON 数据-html教程-PHP中文网

如何基于多级筛选器动态分组并展示 JSON 数据

本文详解如何使用原生 javascript（配合 jquery）根据国家、州/省、城市三级下拉筛选，实时加载并分组展示关联的 json 数据，包含联动筛选逻辑、数据结构优化建议及结果渲染实现。

本文详解如何使用原生 javascript（配合 jquery）根据国家、州/省、城市三级下拉筛选，实时加载并分组展示关联的 json 数据，包含联动筛选逻辑、数据结构优化建议及结果渲染实现。

在构建地理层级筛选功能时，核心目标不仅是实现下拉联动（如选中国家后动态加载对应州），更要在用户完成多级选择后，精准提取并结构化展示该地理路径下的完整数据组——例如：选择 “USA → New York → New York city”，不仅显示该城市信息，还应一并呈现其所属州、国家及其他同属该州的城市（即“分组展示”）。以下为完整实现方案。

一、数据预处理：构建可检索的层级映射关系

原始 JSON 是扁平化结构（仅靠 parent_id 关联），直接多次遍历过滤效率低且易出错。推荐在页面初始化时一次性解析并建立三类索引：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

let geoData = [];
let countries = {};
let states = {};
let cities = {};

$.getJSON('./data/country_state_city.json', function(data) {
    geoData = data;

    // 构建哈希映射：id → {id, name, parent_id}
    data.forEach(item => {
        const obj = { id: item.id, name: item.name, parent_id: item.parent_id };
        if (item.parent_id === '0') {
            countries[item.id] = obj;
        } else if (countries[item.parent_id]) {
            states[item.id] = obj;
        } else if (states[item.parent_id]) {
            cities[item.id] = obj;
        }
    });
});

二、增强筛选逻辑：支持三级联动 + 结果聚合展示

在原有 change 事件基础上，新增一个 #show-results 按钮或监听 #city 的最终变更，触发结果分组渲染：

// 添加结果展示容器
$('body').append('<div id="results-section" class="mt-4 p-3 bg-light rounded">
<h5>Matching Data Group</h5>
<div id="results-list"></div>
</div>');

function displayGroupedResults(countryId, stateId, cityId) {
    const results = [];

    // 1. 获取当前选中的城市对象
    const selectedCity = cities[cityId];
    if (!selectedCity) return;

    // 2. 向上追溯：获取所属州、国家
    const selectedState = states[stateId];
    const selectedCountry = countries[countryId];

    // 3. 向下聚合：获取同州所有城市（含当前城市）
    const siblingCities = Object.values(cities).filter(c => c.parent_id === stateId);

    // 4. 组装结构化结果组
    results.push({
        type: 'country',
        id: countryId,
        name: selectedCountry?.name || 'N/A'
    });
    results.push({
        type: 'state',
        id: stateId,
        name: selectedState?.name || 'N/A'
    });
    results.push({
        type: 'selected-city',
        id: cityId,
        name: selectedCity.name
    });
    results.push({
        type: 'sibling-cities',
        count: siblingCities.length,
        list: siblingCities.map(c => ({ id: c.id, name: c.name }))
    });

    // 渲染 HTML
    let html = '

${item.count} cities in ${selectedState?.name}:
- ${c.name} (ID: ${c.id})
${item.type}: ${item.name} (ID: ${item.id})

'; $('#results-list').html(html); } // 绑定城市选择后的结果展示 $(document).on('change', '#city', function() { const countryId = $('#country').val(); const stateId = $('#state').val(); const cityId = $(this).val(); if (countryId && stateId && cityId) { displayGroupedResults(countryId, stateId, cityId); } else { $('#results-list').empty(); } });

三、关键注意事项与优化建议

✅ 避免重复请求：$.getJSON 仅在初始化时调用一次，后续所有筛选均基于内存中已解析的 geoData 或映射对象，大幅提升响应速度；
✅ 健壮性校验：每次访问 countries[stateId] 等前务必检查存在性，防止 undefined 导致脚本中断；

⚠️ JSON 结构升级建议：如需扩展属性（时区、人口、经纬度等），强烈建议重构为嵌套结构（如 countries[].states[].cities[]），而非维持扁平 ID 链。这将使 filter() 和 find() 操作更直观：

// 示例：现代结构（便于多维筛选）
const structuredData = [
  {
    "country": "USA",
    "states": [
      {
        "name": "New York",
        "cities": [
          { "name": "New York city", "timezone": "EST" },
          { "name": "Buffalo", "timezone": "EST" }
        ]
      }
    ]
  }
];