如何使用jQuery监听date输入框选中特定日期时修改下拉框选项值

实现方案及代码修正 #

你原代码存在3个核心问题导致功能失效：

• 特定日期判断逻辑错误：selDate.getDate()返回的是当月的日期数字（仅1-31），无法和'2021-12-25'完整日期字符串匹配
• 循环变量错误：特定日期分支的for循环条件写了j++，但实际用的变量是l，会触发死循环
• 判断优先级错误：特定日期的判断需要放在周几判断的前面，否则如果特殊日期刚好是周六/周日，会优先命中周几的逻辑，不会走特殊日期分支

修正后完整代码 #

$(function() {
  $("#txtDate").change(function() {
    // 定义各场景对应的下拉选项
    const weekdayOptions = ['6:30AM (English)'];
    const sundayOptions = ['7:00AM (English)']; 
    const saturdayOptions = ['6:30AM (English)']; 
    const christmas2021Options = ['7:30AM (English)']; 

    const selectedDateStr = this.value; // date输入框的value本身就是yyyy-MM-dd格式字符串
    const selDate = new Date(selectedDateStr);
    $('#items').html('<option value="">---SELECT---</option>'); // 先重置默认提示项

    let targetOptions = [];
    // 优先级：特殊日期 > 周几规则
    if (selectedDateStr === '2021-12-25') {
      targetOptions = christmas2021Options;
    } else if (selDate.getDay() === 0) { // 周日
      targetOptions = sundayOptions;
    } else if (selDate.getDay() === 6) { // 周六
      targetOptions = saturdayOptions;
    } else { // 工作日
      targetOptions = weekdayOptions;
    }

    // 统一生成选项，避免重复写循环逻辑
    targetOptions.forEach(item => {
      $('<option/>').val(item).text(item).appendTo('#items');
    });
  });

  // 如果页面加载时date输入框已有默认值（比如php回显的内容），主动触发一次change生成对应选项
  if ($("#txtDate").val()) {
    $("#txtDate").trigger('change');
  }
});

对应的HTML部分无需修改，保持原有结构即可。

扩展说明 #

如果后续需要新增更多特殊日期，只需要提前定义好特殊日期和对应选项的映射表即可，示例如下：

// 特殊日期映射表，key为yyyy-MM-dd格式的日期，value为对应的下拉选项数组
const specialDateMap = {
  '2021-12-25': ['7:30AM (English)'],
  '2022-01-01': ['8:00AM (New Year Special)'],
  '2022-12-25': ['7:30AM (Christmas)']
}

然后判断分支直接取映射表的值即可，不需要重复写if判断。

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