Ajax触发下拉框联动异常：编辑分支时区县等未正确选中/填充

问题根源 #

你的代码中连续调用 .trigger('change') 是同步执行逻辑，但Ajax请求是异步的。这意味着：

• 当你设置区县值并触发change时，城市对应的区县数据还没通过Ajax返回，下拉框里没有目标选项，自然无法选中；
• 后续街道、社区的操作也会因为前面的Ajax未完成，导致下拉框没有被填充，所以完全无内容。

解决方案 #

将每个层级的Ajax请求封装为独立函数，通过异步链式调用保证操作顺序：只有前一层级的下拉框数据加载完成后，再进行当前层级的选中与下一层级的数据加载。

修改后的完整代码 #

1. 封装联动数据加载函数

// 封装获取区县数据的函数，返回Ajax Promise
function loadCounties(cityId) {
  return $.ajax({
    type: 'POST',
    url: 'functions/getters/get_location_info.php',
    data: { city_id: cityId }
  });
}

// 封装获取街道数据的函数
function loadDistricts(countyId) {
  return $.ajax({
    type: 'POST',
    url: 'functions/getters/get_location_info.php',
    data: { county_id: countyId }
  });
}

// 封装获取社区数据的函数
function loadQuarters(districtId) {
  return $.ajax({
    type: 'POST',
    url: 'functions/getters/get_location_info.php',
    data: { district_id: districtId }
  });
}

2. 修改下拉框change事件逻辑

$(document).ready(function() {
  $('#edit_city').change(function() {
    var cityId = $(this).val();
    loadCounties(cityId).done(function(counties) {
      $('#edit_county').html(counties);
      $('#edit_district').html('<option value="0">Semt Seçiniz</option>');
    });
  });

  $('#edit_county').change(function() {
    var countyId = $(this).val();
    loadDistricts(countyId).done(function(districts) {
      $('#edit_district').html(districts);
      $('#edit_quarter').html('<option value="0">Köy Mahalle Seçiniz</option>');
    });
  });

  $('#edit_district').change(function() {
    var districtId = $(this).val();
    loadQuarters(districtId).done(function(quarters) {
      $('#edit_quarter').html(quarters);
    });
  });
});

3. 修改分支数据获取与填充逻辑（链式回调版）

$('.btn-edit-branch').click(function() {
  var branchId = $(this).data('branch_id');
  $.ajax({
    url: 'functions/getters/get_location_info.php',
    type: 'POST',
    data: { branch_id_edit: branchId }
  }).done(function(data) {
    var branchInfo = JSON.parse(data);
    var city_id = branchInfo.ref_city;
    var county_id = branchInfo.ref_county;
    var district_id = branchInfo.ref_district;
    var quarter_id = branchInfo.ref_quarter;

    // 设置分支基本信息
    $('#edit_branch_id').val(branchInfo.id);
    $('#edit_branch_name').val(branchInfo.branch_name);
    $('#edit_address').val(branchInfo.address);
    $('#edit_branch_mail').val(branchInfo.email);
    $('#edit_branch_phone').val(branchInfo.phone);

    // 按顺序执行：城市→区县→街道→社区
    $('#edit_city').val(city_id);
    loadCounties(city_id).done(function(counties) {
      $('#edit_county').html(counties);
      $('#edit_county').val(county_id);
      loadDistricts(county_id).done(function(districts) {
        $('#edit_district').html(districts);
        $('#edit_district').val(district_id);
        loadQuarters(district_id).done(function(quarters) {
          $('#edit_quarter').html(quarters);
          $('#edit_quarter').val(quarter_id);
        });
      });
    });
  }).fail(function() {
    alert('Veriler çekilirken bir hata oluştu');
  });
});

可选：更简洁的async/await版本

$('.btn-edit-branch').click(async function() {
  var branchId = $(this).data('branch_id');
  try {
    // 获取分支信息
    const branchResponse = await $.ajax({
      url: 'functions/getters/get_location_info.php',
      type: 'POST',
      data: { branch_id_edit: branchId }
    });
    var branchInfo = JSON.parse(branchResponse);
    var city_id = branchInfo.ref_city;
    var county_id = branchInfo.ref_county;
    var district_id = branchInfo.ref_district;
    var quarter_id = branchInfo.ref_quarter;

    // 设置分支基本信息
    $('#edit_branch_id').val(branchInfo.id);
    $('#edit_branch_name').val(branchInfo.branch_name);
    $('#edit_address').val(branchInfo.address);
    $('#edit_branch_mail').val(branchInfo.email);
    $('#edit_branch_phone').val(branchInfo.phone);

    // 依次加载并选中各层级数据
    $('#edit_city').val(city_id);
    const counties = await loadCounties(city_id);
    $('#edit_county').html(counties).val(county_id);
    
    const districts = await loadDistricts(county_id);
    $('#edit_district').html(districts).val(district_id);
    
    const quarters = await loadQuarters(district_id);
    $('#edit_quarter').html(quarters).val(quarter_id);
  } catch (error) {
    alert('Veriler çekilirken bir hata oluştu');
  }
});

关键说明 #

• 通过将Ajax请求封装为返回Promise的函数，确保每一步数据加载完成后再执行后续操作；
• 链式回调或async/await都能解决异步顺序问题，async/await版本代码更直观易读；
• 取消了原代码中连续触发change的逻辑，改为手动填充数据并选中，避免不必要的事件触发。

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