在Angular 2+中从JSON文件按ID查询对象并实现三级联动下拉

嘿，我来帮你搞定这个三级联动的需求！先从基础的根据ID查询对象的工具函数入手，再一步步实现下拉框的联动逻辑，保证清晰好懂～

1. 封装根据ID查询嵌套数据的工具函数 #

你的JSON是嵌套结构，我们需要两个针对性的辅助函数，用来根据ID快速定位对应的子级数据：

// 先把你的JSON数据存到变量里（如果是外部文件，记得用fetch/ajax加载后再处理）
const countryData = { 
  "id": "1", 
  "country": "Brazil", 
  "state": [ 
    {"id": "1", "name": "Acre", "city": [ 
      { "id": "1", "name": "Rio Branco"}, 
      { "id": "2", "name": "Xapuri"}, 
      { "id": "3", "name": "Cruzeiro do Sul"} 
    ] }
    // 后续可以添加其他国家、州的数据
  ]
};

// 根据国家ID获取对应的州列表
function getStatesByCountryId(countryId) {
  // 如果以后要扩展多个国家，只需要把数据改成数组，用find匹配即可
  // 比如：const targetCountry = countriesArray.find(c => c.id === countryId);
  return countryData.id === countryId ? countryData.state : [];
}

// 根据州ID获取对应的城市列表
function getCitiesByStateId(stateId) {
  const targetState = countryData.state.find(s => s.id === stateId);
  return targetState ? targetState.city : [];
}

2. 实现下拉框的联动逻辑 #

假设你的HTML结构是这样的三个下拉框：

<select id="countrySelect">
  <option value="1">Brazil</option>
  <!-- 后续多国家可以通过JS自动填充 -->
</select>

<select id="stateSelect">
  <option value="">请选择州</option>
</select>

<select id="citySelect">
  <option value="">请选择城市</option>
</select>

接下来写事件监听，实现选择触发更新的逻辑：

// 获取三个下拉框DOM元素
const countrySelect = document.getElementById('countrySelect');
const stateSelect = document.getElementById('stateSelect');
const citySelect = document.getElementById('citySelect');

// 国家选择变化时，更新州下拉框
countrySelect.addEventListener('change', function() {
  const selectedCountryId = this.value;
  // 先清空旧的州和城市选项
  stateSelect.innerHTML = '<option value="">请选择州</option>';
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  
  if (!selectedCountryId) return;
  
  // 拿到对应州列表，动态添加选项
  const states = getStatesByCountryId(selectedCountryId);
  states.forEach(state => {
    const option = document.createElement('option');
    option.value = state.id;
    option.textContent = state.name;
    stateSelect.appendChild(option);
  });
});

// 州选择变化时，更新城市下拉框
stateSelect.addEventListener('change', function() {
  const selectedStateId = this.value;
  // 清空旧的城市选项
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  
  if (!selectedStateId) return;
  
  // 拿到对应城市列表，动态添加选项
  const cities = getCitiesByStateId(selectedStateId);
  cities.forEach(city => {
    const option = document.createElement('option');
    option.value = city.id;
    option.textContent = city.name;
    citySelect.appendChild(option);
  });
});

// 页面加载完成后，默认加载第一个国家的州（可选）
window.addEventListener('DOMContentLoaded', function() {
  if (countrySelect.value) {
    countrySelect.dispatchEvent(new Event('change'));
  }
});

3. 扩展多国家的适配（可选） #

如果以后你的JSON变成多国家数组，比如：

const countriesArray = [
  { 
    "id": "1", 
    "country": "Brazil", 
    "state": [ /* 巴西的州数据 */ ]
  },
  { 
    "id": "2", 
    "country": "USA", 
    "state": [ /* 美国的州数据 */ ]
  }
];

只需要调整两个地方：

• 更新getStatesByCountryId函数：

function getStatesByCountryId(countryId) {
  const targetCountry = countriesArray.find(c => c.id === countryId);
  return targetCountry ? targetCountry.state : [];
}

• 页面加载时自动填充国家选项：

window.addEventListener('DOMContentLoaded', function() {
  // 填充国家选项
  countriesArray.forEach(country => {
    const option = document.createElement('option');
    option.value = country.id;
    option.textContent = country.country;
    countrySelect.appendChild(option);
  });
  // 触发默认加载
  countrySelect.dispatchEvent(new Event('change'));
});

这样整个联动逻辑就完全适配多国家场景啦，核心就是通过ID匹配嵌套数据，再动态更新下拉框选项。

内容的提问来源于stack exchange，提问作者Murilo Góes de Almeida