如何用JS/jQuery/JSON/Ajax实现选中区域加载对应省份的级联下拉

需求说明 #

实现选中region区域下拉框的选项时，province省份下拉框仅加载该区域下的对应省份，而非加载全部省份数据。

数据结构说明 #

• 区域数据存储于regions.json，每条数据包含code（区域编码）、name（区域名称）、altName（区域别名）字段，示例为伊罗戈斯地区数据
• 省份数据存储于provinces.json，每条数据包含code、name、altName、region（关联所属区域的编码）字段，所有省份通过region字段绑定对应区域的code

现有代码问题 #

• 未初始化regionOption、provinceOption变量，拼接下拉选项时会出现undefined前缀的渲染异常
• 填充省份下拉框时未根据选中的区域编码过滤对应省份数据
• 之前尝试添加的条件判断if($(this).val() === $(this).val())逻辑恒为真，未实现实际筛选，无法达成级联联动效果

具体实现代码 #

// 全局缓存拉取到的区域、省份数据
let regionsData = [];
let provincesData = [];

$(document).ready(function() {
  // 拉取区域数据，填充下拉框
  $.getJSON('regions.json', function(regions) {
    regionsData = regions;
    // 初始化选项字符串为空，避免undefined前缀
    let regionOption = '<option value="">请选择区域</option>';
    $.each(regions, function(index, region) {
      regionOption += `<option value="${region.code}">${region.name} (${region.altName})</option>`;
    });
    $('#region').html(regionOption);
    // 省份下拉框默认置灰，提示先选择区域
    $('#province').html('<option value="">请先选择区域</option>').prop('disabled', true);
  });

  // 拉取省份数据缓存，无需立刻渲染
  $.getJSON('provinces.json', function(provinces) {
    provincesData = provinces;
  });

  // 绑定区域下拉框选中变化事件，触发级联筛选
  $('#region').on('change', function() {
    const selectedRegionCode = $(this).val();
    // 无有效选中区域时，重置并禁用省份下拉框
    if (!selectedRegionCode) {
      $('#province').html('<option value="">请先选择区域</option>').prop('disabled', true);
      return;
    }
    // 按选中区域编码过滤匹配的省份数据
    const matchedProvinces = provincesData.filter(item => item.region === selectedRegionCode);
    // 初始化省份选项字符串
    let provinceOption = '<option value="">请选择省份</option>';
    $.each(matchedProvinces, function(index, province) {
      provinceOption += `<option value="${province.code}">${province.name} (${province.altName})</option>`;
    });
    // 填充省份选项并启用下拉框
    $('#province').html(provinceOption).prop('disabled', false);
  });
});

关键修改对应解决的问题 #

1. 下拉选项变量直接初始化为带默认占位项的字符串，彻底消除拼接时的undefined前缀问题
2. 提前缓存两份JSON数据，既减少重复请求的性能损耗，也支持本地快速筛选匹配省份
3. 用选中的区域编码和省份关联字段做精确匹配，替代之前恒真的无效判断逻辑，实现真正的联动筛选
4. 补充状态控制：未选有效区域时默认禁用省份下拉框，避免用户误操作无绑定数据的选项

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