使用jQuery .change()时JavaScript Promises失效及取值问题排查

首先，咱们先揪出你代码里的核心问题：你把course_select的事件绑定直接丢进了Promise链的.then()里，这会导致两个关键问题：

1. 这个绑定操作会立即执行（而不是等第一个AJAX完成后），而且它不返回Promise，所以后面的.then()根本拿不到你期望的AJAX数据。
2. 级联下拉的逻辑是用户触发的分步操作，不是一次性的异步流程，把所有逻辑嵌套在第一个change的Promise链里完全搞错了方向。

修正后的代码实现 #

咱们把逻辑拆解开，每个下拉框的change事件独立处理自己的异步请求，这样逻辑更清晰，也能正确获取到每个下拉框的值：

第一步：优化你的callAjax函数 #

function callAjax(url, data) {
  return $.ajax({
    type: 'GET',
    url: url,
    data: data,
    dataType: 'json' // 明确指定返回JSON，避免自动解析出错
  });
}

第二步：处理大学下拉框的change事件 #

$('#university').change(function() {
  const universityId = $(this).val();
  
  // 清空后续所有下拉框，避免旧数据残留
  $('#course_select, #subject_select, #exams_select').empty();

  callAjax('http://localhost:8000/exams/get_courses/', { ui: universityId })
    .then(function(courses) {
      const courseSelect = $('#course_select');
      // 用更简洁的方式渲染课程选项
      courses.forEach(course => {
        courseSelect.append(`<option value="${course.id}">${course.name}</option>`);
      });
    })
    .catch(function(error) {
      console.error('加载课程失败:', error);
      // 这里可以给用户展示错误提示，比如 alert('加载课程失败，请重试')
    });
});

第三步：处理课程下拉框的change事件 #

$('#course_select').change(function() {
  const courseId = $(this).val();
  
  // 如果没有选中课程，直接返回，不发起请求
  if (!courseId) return;
  
  // 清空后续下拉框
  $('#subject_select, #exams_select').empty();

  callAjax('http://localhost:8000/exams/get_subjects/', { course_id: courseId })
    .then(function(subjects) {
      const subjectSelect = $('#subject_select');
      subjects.forEach(subject => {
        subjectSelect.append(`<option value="${subject.id}">${subject.name}</option>`);
      });
    })
    .catch(function(error) {
      console.error('加载科目失败:', error);
    });
});

更好的实践建议 #

1. 添加加载状态：在发起AJAX前给下拉框加一个"加载中"的选项，提升用户体验：

   // 比如在发起请求前：
   courseSelect.append('<option value="">加载中...</option>');
   

2. 用async/await简化异步代码：如果你的jQuery版本支持（或者环境允许），async/await会让异步代码更像同步代码，可读性更高：

   $('#university').change(async function() {
     const universityId = $(this).val();
     $('#course_select, #subject_select, #exams_select').empty();
   
     try {
       const courses = await callAjax('http://localhost:8000/exams/get_courses/', { ui: universityId });
       const courseSelect = $('#course_select');
       courses.forEach(course => {
         courseSelect.append(`<option value="${course.id}">${course.name}</option>`);
       });
     } catch (error) {
       console.error('加载课程失败:', error);
     }
   });
   

3. 防抖处理：如果用户快速切换下拉选项，可以加防抖函数，避免频繁发起AJAX请求：

   function debounce(func, delay = 300) {
     let timeoutId;
     return function() {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => func.apply(this, arguments), delay);
     };
   }
   
   // 绑定事件时用防抖
   $('#university').change(debounce(function() {
     // 原来的逻辑
   }));
   

为什么你的原代码不行？ #

你原代码里的这段是关键错误：

.then( $('#course_select').change( function() { 
  // Here I want to call callAjax method. 
}) )

这段代码会立即执行$('#course_select').change(...)来绑定事件，而不是等第一个AJAX完成后再执行。而且change()方法返回的是jQuery对象，不是Promise，所以后面的.then()根本拿不到任何数据，自然没法处理后续的DOM操作。

把每个下拉框的事件独立出来，让用户的交互触发对应的异步请求，才是级联下拉的正确打开方式~

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