AJAX联动加载：选无数据ID后再选有数据ID仍提示无数据如何解决

问题原因 #

• 错误使用不存在的enabled属性启用控件：HTML没有enabled原生属性，你通过attr("enabled", "enabled")尝试启用下拉的操作完全无效，之前设置的disabled属性会一直保留，导致控件始终不可用。
• 事件绑定逻辑错误：你给无数据的员工禁用列表时调用了.off('click')移除了点击事件，但后续重新启用时只写了.on('click')没有传入对应的事件处理函数，相当于没有恢复点击功能。
• 状态没有提前重置：每次切换员工ID后，没有先清空上一次设置的disabled、title等状态，会残留上一次无数据时的禁用状态。

修复方案 #

核心调整逻辑如下：

1. 每次请求返回后先重置两个列表的基础状态，移除禁用属性、清除提示title
2. 用removeAttr('disabled')来启用元素，替代无效的enabled属性设置
3. 移除不必要的.off('click')操作，避免频繁解绑/绑定事件导致功能失效
4. 简化冗余的条件判断逻辑，避免多分支逻辑冲突

完整修正后代码 #

$('select[name="employee_id"]').on('change', function() {
  console.log('inside script')
  const employee_id = document.getElementById('employee_id').selectedOptions[0].value;
  console.log(employee_id)

  $.ajax({
    type: "POST",
    url: "/kpiDetailsList",
    datatype: "json",
    data: JSON.stringify({
      'employee_id': employee_id,
    }),
    contentType: 'application/json;charset=UTF-8',
    success: function(data) {
      console.log(data);
      const parsed_data = data;
      // 变量添加声明，避免成为全局变量引发异常
      const monthly_list = parsed_data.monthly_list;
      const quarterly_list = parsed_data.quarterly_list;   
      console.log(monthly_list.length)
      console.log(quarterly_list.length)

      // 先重置两个列表的状态，清除上一次的禁用设置
      $("#list1").removeAttr("disabled").removeAttr("title");
      $("#list2").removeAttr("disabled").removeAttr("title");
      // 先清空两个列表的旧数据
      $('#list1_items').empty();
      $('#list2_items').empty();

      // 单独处理月度列表
      if (monthly_list.length > 0) {
        for (let index = 0; index < monthly_list.length; index++) {
          $('#list1_items').append(`<li><input type='checkbox' name='month' value='${monthly_list[index]}' id='${monthly_list[index]}'><label for='${monthly_list[index]}'>${monthly_list[index]}</label></li>`);
        }
      } else {
        $("#list1").attr("disabled", "disabled").attr("title", "Data not available");
      }

      // 单独处理季度列表
      if (quarterly_list.length > 0) {
        // 用映射表替代冗余的if判断
        const quarterLabelMap = {
          'Quarter1': 'Apr - Jun (Quarter 1)',
          'Quarter2': 'Jul - Sep (Quarter 2)',
          'Quarter3': 'Oct - Dec (Quarter 3)',
          'Quarter4': 'Jan - Mar (Quarter 4)'
        };
        for (let index = 0; index < quarterly_list.length; index++) {
          const q = quarterly_list[index];
          if (quarterLabelMap[q]) {
            $('#list2_items').append(`<li><input type='checkbox' name='quarter' value='${q}' id='${q}'><label for='${q}'>${quarterLabelMap[q]}</label></li>`);
          } else {
            console.log('Data not found')
          }
        }
      } else {
        $("#list2").attr("disabled", "disabled").attr("title", "Data not available");
      }
    },
    error: function(e) {
      console.log("Error :" + e)
    }
  });
});

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