Angular5中实现国家-城市联动下拉框问题求助

嘿，我来帮你搞定这个联动下拉框的问题！看起来你已经搞定了国家下拉的渲染，现在就差把城市和国家关联起来对吧？我给你写个完整的可运行示例，一步一步拆解逻辑：

1. HTML 结构 #

首先我们需要两个下拉框，一个选国家，一个展示对应城市：

<select id="countrySelect">
  <!-- 这里你已经成功渲染了国家选项，比如： -->
  <option value="India">India</option>
  <!-- 其他国家选项... -->
</select>

<select id="citySelect">
  <option value="">请先选择国家</option>
</select>

2. JavaScript 逻辑（核心部分） #

接下来就是处理联动逻辑，重点是如何访问嵌套的JSON数据。我直接用你提供的JSON示例来写代码：

// 你的JSON数据（可以是从接口获取的，这里先模拟）
const countryData = [
  {
    "countryName": "India",
    "cities": [
      { "id": 1, "name": "Banglaore", "founded": -200, "beautiful": true, "data": 123, "keywords": ["Kaveri", "River"] },
      { "id": 2, "name": "Pune", "founded": 0, "beautiful": true }
    ]
  },
  // 可以加更多国家示例
  {
    "countryName": "China",
    "cities": [
      { "id": 3, "name": "Beijing", "founded": 1045, "beautiful": true },
      { "id": 4, "name": "Shanghai", "founded": 1292, "beautiful": true }
    ]
  }
];

// 获取DOM元素
const countrySelect = document.getElementById('countrySelect');
const citySelect = document.getElementById('citySelect');

// 监听国家选择变化事件
countrySelect.addEventListener('change', function() {
  const selectedCountry = this.value;
  
  // 清空城市下拉框的旧选项
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  
  // 关键：从JSON中找到对应国家的城市列表
  // 用find方法匹配countryName等于选中的国家
  const matchedCountry = countryData.find(country => country.countryName === selectedCountry);
  
  if (matchedCountry) {
    // 遍历城市数组，生成选项
    matchedCountry.cities.forEach(city => {
      const option = document.createElement('option');
      option.value = city.id; // 可以用城市id作为value，也可以用name
      option.textContent = city.name;
      citySelect.appendChild(option);
    });
  }
});

// 页面加载时，如果国家下拉有默认选中项，自动触发一次change事件
if (countrySelect.value) {
  countrySelect.dispatchEvent(new Event('change'));
}

关键逻辑解释 #

• 访问嵌套JSON：当你选中一个国家后，我们用Array.find()方法从countryData数组里找到countryName和选中值匹配的对象，这个对象的cities属性就是你要的城市数组，直接遍历它就行。
• 清空旧选项：每次选择新国家时，先清空城市下拉框的内容，避免之前的城市残留。
• 默认触发事件：页面加载完成后，如果国家下拉已经有默认选中的项，自动触发change事件，直接加载对应城市。

如果你是从后端接口获取这个JSON数据，只需要把countryData替换成接口返回的响应数据就行，逻辑完全一样~

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