本文详解如何利用原生 javascript（含 jquery）实现三级联动筛选（国家→州/省→城市），并根据用户选择动态过滤、分组和渲染关联的 json 数据，同时提供结构优化建议与实用代码示例。
本文详解如何利用原生 javascript（含 jquery）实现三级联动筛选（国家→州/省→城市），并根据用户选择动态过滤、分组和渲染关联的 json 数据，同时提供结构优化建议与实用代码示例。
在构建地理层级筛选功能时，仅实现下拉联动（如选国家后加载对应州）是基础，真正满足业务需求的是——在最终选定组合（如 USA → New York → New York city）后，完整展示该城市所属的全路径信息及关联数据。以下将从数据预处理、动态筛选逻辑到页面渲染，提供一套可直接落地的解决方案。
一、优化 JSON 数据结构（提升可维护性）
原始扁平化 JSON（单数组+ parent_id）虽便于递归加载，但不利于多条件联合查询。推荐两种增强型结构：
✅ 方案一：扁平化 + 扩展字段（轻量升级）
为每个条目补充显式层级字段，保持数组结构不变，便于 filter() 链式调用：
[
{
"id": "11",
"name": "New York city",
"country": "USA",
"state": "New York",
"country_id": "1",
"state_id": "4"
}
]
✅ 方案二：嵌套结构（语义清晰，适合复杂场景）
使用对象嵌套明确层级关系，天然支持深度筛选：
{
"USA": {
"id": "1",
"states": {
"New York": {
"id": "4",
"cities": [
{ "id": "11", "name": "New York city", "timezone": "EST" },
{ "id": "12", "name": "Buffalo", "timezone": "EST" }
]
}
}
}
}
⚠️ 注意：若坚持使用原始 parent_id 结构，需在前端构建索引映射表（见下方代码），避免每次 filter() 全量遍历。
dmap-jsapi-skill下载DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
二、增强筛选与分组逻辑（jQuery 实现）
在原有联动逻辑基础上，新增 displayResults() 函数，根据三个下拉框的当前值，精准提取匹配项并渲染：
// 预加载并构建索引（提升性能）
let geoData = [];
let countryMap = {}, stateMap = {};
$.getJSON('./data/country_state_city.json', function(data) {
geoData = data;
// 构建 ID → 条目映射
data.forEach(item => {
if (item.parent_id === '0') {
countryMap[item.id] = item;
} else {
stateMap[item.id] = item;
}
});
});
// 显示匹配结果（调用时机：任一筛选器变更后）
function displayResults() {
const countryId = $('#country').val();
const stateId = $('#state').val();
const cityId = $('#city').val();
// 获取全路径名称（用于标题）
const countryName = countryId ? countryMap[countryId]?.name || '' : '';
const stateName = stateId ? stateMap[stateId]?.name || '' : '';
const cityName = cityId ? stateMap[cityId]?.name || '' : '';
// 筛选：找到所有 parent_id 匹配的条目（即同属一个城市的全部数据）
const results = geoData.filter(item =>
item.parent_id === cityId // 假设目标数据均以 cityId 为 parent_id
);
// 渲染区域（示例：追加到 .container 后）
const $results = $('#results');
if (results.length > 0) {
let html = `<h3>? ${countryName} → ${stateName} → ${cityName}</h3>
- `;
results.forEach(item => {
html += `
- ${item.name} (ID: ${item.id}) `; }); html += '
❌ 未找到关联数据
'); } } // 绑定到所有 select 的 change 事件 $('#country, #state, #city').on('change', function() { // 清空后续下拉框（保持联动一致性） if ($(this).attr('id') === 'country') { $('#state').html(''); $('#city').html(''); } else if ($(this).attr('id') === 'state') { $('#city').html(''); } // 延迟执行 displayResults，确保 DOM 更新完成 setTimeout(displayResults, 10); });三、关键注意事项与进阶建议
- 性能优化：对大型数据集，避免在 change 回调中重复解析 JSON。务必预加载并构建 countryMap/stateMap 索引。
- 空值防御：始终检查 val() 返回值是否为空字符串或 undefined，再进行 map 查找。
- 扩展性设计：若未来需支持“按时区筛选”，方案一的扁平化结构只需增加 timezone 字段并扩展 displayResults() 的 filter() 条件即可。
- 现代替代方案：如项目允许技术栈升级，React + Vite 是更优解——用 useState 管理筛选状态，useEffect 处理依赖更新，配合 Array.filter() 实现声明式渲染，代码更简洁、可测试性更强（参考 Vite React 官方指南）。
通过以上改造，您将获得一个响应迅速、结构清晰、易于维护的多级筛选与数据分组系统，真正实现“所选即所见，所见即所需”。
