如何使用含城市ID的嵌套JSON数据填充联动下拉选择框？

嘿，我完全懂你现在的困扰——之前用jQuery搞定了批发商和覆盖城市的下拉联动，现在JSON数据源里多了每个城市的ID，不知道怎么把这些位置相关的ID和名称一起处理提取对吧？别慌，咱们一步步来调整代码，完美适配新的数据源～

第一步：先明确新的JSON结构 #

首先假设你的JSON现在是类似这样的（如果是后端返回的，结构逻辑一致）：

const wholesalerData = [
  {
    "name": "华北批发商",
    "cities": [
      {"id": 101, "name": "北京"},
      {"id": 102, "name": "天津"},
      {"id": 103, "name": "石家庄"}
    ]
  },
  {
    "name": "华南批发商",
    "cities": [
      {"id": 201, "name": "广州"},
      {"id": 202, "name": "深圳"},
      {"id": 203, "name": "佛山"}
    ]
  }
];

第二步：修改下拉联动的逻辑，把ID绑定到选项上 #

之前的代码可能只把城市名称塞到<option>里，现在咱们要把城市ID设为选项的value，名称作为显示文本，这样后续提取数据就方便了：

// 监听批发商下拉框的变化事件
$('#wholesaler_name').on('change', function() {
  // 获取选中的批发商名称
  const selectedName = $(this).val();
  // 从JSON里找到对应的批发商数据
  const targetWholesaler = wholesalerData.find(item => item.name === selectedName);
  
  // 先清空城市下拉框的旧选项
  $('#wholesaler_city').empty();
  
  if (targetWholesaler) {
    // 遍历该批发商的城市列表，创建带ID的选项
    targetWholesaler.cities.forEach(city => {
      const option = $('<option>')
        .val(city.id) // 把城市ID设置为选项的value值
        .text(city.name); // 显示城市名称
      $('#wholesaler_city').append(option);
    });
  }
});

第三步：提取选中的位置相关数据 #

当用户选择城市后，你可以通过两种方式获取ID和名称：

方式1：直接从下拉框提取 #

// 监听城市下拉框的选择事件
$('#wholesaler_city').on('change', function() {
  // 获取选中的城市ID（就是咱们之前设置的option的value）
  const selectedCityId = $(this).val();
  // 获取选中的城市名称
  const selectedCityName = $(this).find('option:selected').text();
  
  // 这里就可以用这两个数据做后续操作了，比如提交表单、渲染其他内容
  console.log('选中的城市ID：', selectedCityId);
  console.log('选中的城市名称：', selectedCityName);
});

方式2：从原始JSON里获取完整的城市对象 #

如果你需要城市的更多关联数据（后续可能扩展），可以从原始JSON里匹配出完整的城市对象：

$('#wholesaler_city').on('change', function() {
  const selectedCityId = $(this).val();
  const selectedWholesalerName = $('#wholesaler_name').val();
  
  // 先找到选中的批发商
  const targetWholesaler = wholesalerData.find(item => item.name === selectedWholesalerName);
  // 再从该批发商的城市列表里找到对应ID的城市对象
  const selectedCity = targetWholesaler.cities.find(city => city.id == selectedCityId);
  
  // 现在selectedCity就是包含id和name的完整对象了
  console.log('完整的城市数据：', selectedCity);
});

小提示 #

• 如果你的JSON是通过AJAX从后端获取的，只需要把wholesalerData替换成AJAX返回的响应数据就行，逻辑完全一致；
• 如果需要默认选中某个城市，可以在创建<option>的时候判断，比如if (city.id === 默认ID) option.prop('selected', true)。

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