jQuery级联依赖下拉框中District无法显示选中值的问题如何解决

你的代码核心问题是异步请求时序不匹配：

• 调用$("#state").val(studData.state_id).change()触发拉取District列表的axios异步请求，该请求不会阻塞后续代码执行
• 后续$("#dist").val(studData.district_id)执行时，District的选项还没被接口返回数据渲染到DOM里，自然无法匹配到对应值完成选中
  另外你的代码还存在一个小缺陷：每次切换State时没有清空旧的District选项，会导致不同State的District选项累加。

步骤1：改造getDist函数，返回Promise支持异步等待，同时新增预设District值的传参 #

const getDist = (state, defaultDistId = null) => {
  // 先清空原有District选项，避免累加
  $('#dist').html('<option value="" hidden>Select District</option>');
  return axios.get(`${url}district?id=${state}`)
    .then(function(res) {
      if (res.data.status == 'success') {
        res.data.result.map((e) => {
          $('#dist').append(`<option value="${e.dist_id}" >${e.dist_name}</option>`);
        });
        // 选项渲染完成后，如果有传入默认值，直接设置选中
        if (defaultDistId) {
          $("#dist").val(defaultDistId).change();
        }
      }
    });
}

步骤2：修改Promise.all回调逻辑，不要直接给District赋值，把默认District值传给getDist #

Promise.all([getState(), getDetails(student)])
  .then(function(results) {
    const state = results[0];
    const student = results[1];
    let studData = null;

    if (state.data.status == 'success') {
      state.data.result.map((e) => {
        $('#state').append(`<option value="${e.st_id}">${e.st_name}</option>`);
      });
    }

    if (student.data.status == 'success') {
      studData = student.data.result;
      // 设置State选中后，直接调用getDist并传入要预设的District ID
      $("#state").val(studData.state_id);
      getDist(studData.state_id, studData.district_id);
    }
  });

步骤3：保留原有State的change事件逻辑（不需要传默认值即可） #

$(document).ready(function() {
  $("#state").change(function() {
    let stateID = $(this).val();
    // 普通切换State时不需要预设值，只传stateID即可
    getDist(stateID);
  });
});

HTML部分不需要修改，修改后会等District的所有选项渲染完成后再执行赋值操作，就能正常匹配到对应选项完成选中。

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