判断Ajax调用完成后执行新Ajax？联动Select复制功能异常求助

嘿，我完全懂你遇到的这个痛点——依赖异步加载的下拉框真的会让直接用val()设置值变得非常棘手，毕竟你调用val()的时候，目标下拉框的选项可能还没从后端拉取渲染出来呢！下面给你几个贴合实际场景的解决方案，你可以根据项目情况选：

1. 给下拉框的Ajax加载添加完成事件，等待加载后再赋值 #

如果这些下拉框的Ajax逻辑是你自己写的，那最简单的方式就是在每个下拉框的Ajax成功回调里触发一个自定义事件，比如ajax:loaded，然后在同步的时候等待这个事件触发后再设置值。

举个代码例子：

// 先给永久地址的下拉框加载逻辑加自定义事件（现住址的同理）
function loadPermanentProvince() {
  $.ajax({
    url: '/api/get-provinces',
    success: function(data) {
      $('#permanent-province').html(data.options);
      // 触发自定义事件，标记加载完成
      $('#permanent-province').trigger('ajax:loaded');
    }
  });
}

// 复选框点击事件逻辑
$('#sync-address').on('click', function() {
  if ($(this).is(':checked')) {
    // 获取永久地址的各级值
    const provinceVal = $('#permanent-province').val();
    const cityVal = $('#permanent-city').val();
    const districtVal = $('#permanent-district').val();

    // 先确保现住址省下拉框加载完成，再赋值
    $('#residence-province').one('ajax:loaded', function() {
      $(this).val(provinceVal);
      // 省赋值后，触发市的加载，再等市加载完成赋值
      $('#residence-city').one('ajax:loaded', function() {
        $(this).val(cityVal);
        // 同理处理区/县
        $('#residence-district').one('ajax:loaded', function() {
          $(this).val(districtVal);
        });
        // 这里要记得手动触发市下拉框的加载逻辑，比如调用loadResidenceCity()
        loadResidenceCity();
      });
      // 手动触发省下拉框的加载逻辑
      loadResidenceProvince();
    });
  } else {
    // 取消同步时清空现住址所有下拉框
    $('#residence-province, #residence-city, #residence-district').val('');
  }
});

这里用one()而不是on()，是为了避免重复绑定事件，确保每级下拉框只执行一次赋值操作。

2. 无法修改Ajax逻辑时，用轮询检查选项是否存在 #

如果你用的是第三方组件或者没法修改原有Ajax回调，那可以用定时器轮询目标下拉框的选项是否已经渲染完成，直到选项存在再赋值：

// 封装一个等待选项加载完成再赋值的函数
async function setSelectValue(targetSelector, targetValue) {
  return new Promise(resolve => {
    const checkInterval = setInterval(() => {
      // 检查目标值对应的选项是否存在
      const hasTargetOption = $(targetSelector).find(`option[value="${targetValue}"]`).length > 0;
      if (hasTargetOption) {
        $(targetSelector).val(targetValue);
        clearInterval(checkInterval);
        resolve();
      }
    }, 100); // 每100ms检查一次，可根据实际网络情况调整
  });
}

// 复选框点击事件
$('#sync-address').on('click', async function() {
  if ($(this).is(':checked')) {
    // 按省→市→区的顺序同步，确保每级完成后再处理下一级
    await setSelectValue('#residence-province', $('#permanent-province').val());
    // 这里要记得触发市下拉框的加载（比如调用组件的加载方法）
    await setSelectValue('#residence-city', $('#permanent-city').val());
    // 触发区下拉框的加载
    await setSelectValue('#residence-district', $('#permanent-district').val());
  }
});

3. 统一管理下拉框的加载状态 #

你可以维护一个对象来记录每个下拉框的加载状态，然后用Promise等待状态变为已加载：

// 初始化加载状态对象
const selectLoadStates = {
  'residence-province': false,
  'residence-city': false,
  'residence-district': false
};

// 在每个下拉框的Ajax成功回调里更新状态
$.ajax({
  url: '/api/get-residence-provinces',
  success: function(data) {
    $('#residence-province').html(data.options);
    selectLoadStates['residence-province'] = true;
  }
});

// 封装等待加载完成的函数
function waitForSelectLoaded(selectKey) {
  return new Promise(resolve => {
    const checkStatus = () => {
      if (selectLoadStates[selectKey]) {
        resolve();
      } else {
        setTimeout(checkStatus, 100);
      }
    };
    checkStatus();
  });
}

// 复选框同步逻辑
$('#sync-address').on('click', async function() {
  if ($(this).is(':checked')) {
    await waitForSelectLoaded('residence-province');
    $('#residence-province').val($('#permanent-province').val());
    
    // 触发市加载后等待完成
    await waitForSelectLoaded('residence-city');
    $('#residence-city').val($('#permanent-city').val());
    
    // 同理处理区
    await waitForSelectLoaded('residence-district');
    $('#residence-district').val($('#permanent-district').val());
  }
});

额外提醒 #

因为下拉框是联动的（选省才加载市，选市才加载区），所以同步的时候一定要按照省→市→区的顺序来操作，确保每一级加载完成后再设置值，不然下级下拉框可能还没有对应父级值的选项。

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