使用jQuery Datepicker动态填充时间下拉列表功能求助

别担心，我帮你梳理下代码里的问题，然后给出修复后的版本，你可以直接用：

代码里的几个关键问题 #

1. date变量未定义：你在时间选项循环里用了timeByDayByStore[store][date]，但没从Datepicker中获取选中的星期几名称
2. 事件监听不够可靠：直接监听#datepicker的change事件，不如用Datepicker自带的onSelect回调，这样用户选择日期时一定会触发
3. 缺少边界判断：如果用户还没选门店，或者选中的日期对应的星期几在当前门店的时间配置里没有数据，会导致报错，需要处理这些情况

修复后的完整代码 #

HTML部分（补充完整原有代码）

<form action="/CustomerService-FFEventBookAppointment">
  <fieldset>
    <div class="form-row">
      <label for="store">Preferred Store *</label>
      <div class="chzn-row valid">
        <select class="chzn-global-select input-select optional required" id="store" name="store">
          <option value=""></option>
          <option value="Martin Place">Martin Place</option>
          <option value="Chatswood Chase">Chatswood Chase</option>
          <option value="Emporium">Emporium</option>
          <option value="Indooroopilly">Indooroopilly</option>
          <option value="Collins Street">Collins Street</option>
          <option value="DJ Market Street">DJ Market Street</option>
          <option value="DJ Bourke Street Mens">DJ Bourke Street Mens</option>
          <option value="DJ Bourke Street Womens">DJ Bourke Street Womens</option>
          <option value="DJ Queen Street">DJ Queen Street</option>
          <option value="DJ Rundle Mall">DJ Rundle Mall</option>
        </select>
      </div>
    </div>
    <div class="form-row">
      <label for="date">Date *</label>
      <div class="chzn-row valid">
        <input type="text" class="chzn-global-select input-select optional required" id="datepicker" name="date">
      </div>
    </div>
    <div class="form-row">
      <label for="time">Time * </label>
      <div class="chzn-row valid">
        <select class="chzn-global-select input-select optional required" id="time" name="time">
          <option value=""></option>
        </select>
      </div>
    </div>
  </fieldset>
</form>

JavaScript部分

var timeByDayByStore = {
  "Martin Place":{
    "Friday":[ "9:00 AM - 10:00 AM", "6:00 PM - 7:00 PM" ],
    "Saturday":[ "10:00 AM - 11:00 AM", "11:00 AM - 12:00 PM", "4:00 PM - 5:00 PM" ],
    "Sunday":[ "11:00 AM - 12:00 PM", "12:00 PM - 1:00 PM", "2:00 PM - 3:00 PM", "3:00 PM - 4:00 PM", "4:00 PM - 5:00 PM" ],
    "Monday":[ "9:00 AM - 10:00 AM", "6:00 PM - 7:00 PM" ],
    "Tuesday":[ "9:00 AM - 10:00 AM" ],
    "Wednesday":[ "9:00 AM - 10:00 AM", "6:00 PM - 7:00 PM" ],
    "Thursday":[ "9:00 AM - 10:00 AM", "7:00 PM - 8:00 PM" ],
  },
  "Chatswood Chase":{
    "Friday":[ "10:00 AM - 11:00 AM", "4:00 PM - 5:00 PM" ],
    "Saturday":[ "9:00 AM - 10:00 AM", "4:00 PM - 5:00 PM" ],
    "Sunday":[ "10:00 AM - 11:00 AM", "4:00 PM - 5:00 PM" ],
    "Monday":[ "10:00 AM - 11:00 AM", "4:00 PM - 5:00 PM" ],
    "Tuesday":[ "10:00 AM - 11:00 AM", "4:00 PM - 5:00 PM" ],
    "Wednesday":[ "10:00 AM - 11:00 AM", "11:00 AM - 12:00 PM", "4:00 PM - 5:00 PM" ],
    "Thursday":[ "8:00 PM - 9:00 PM" ],
  },
  // 可在此补充其他门店的时间配置
};

$(function() {
  $('#datepicker').datepicker({
    dateFormat: 'DD, MM, d, yy',
    // 使用Datepicker自带的onSelect回调，确保选择日期时触发更新
    onSelect: function(selectedDate) {
      updateTimeOptions(selectedDate);
    }
  });

  // 监听门店选择变化，切换门店后若已选日期则更新时间选项
  $('#store').on('change', function() {
    var selectedDate = $('#datepicker').val();
    if (selectedDate) {
      updateTimeOptions(selectedDate);
    } else {
      // 未选日期时清空时间下拉框
      $('#time').html('<option value=""></option>');
    }
  });
});

// 封装更新时间选项的函数，复用逻辑
function updateTimeOptions(selectedDate) {
  var store = $('#store').val();
  var $timeSelect = $('#time');
  
  // 清空原有选项
  $timeSelect.html('<option value=""></option>');
  
  // 判断门店是否选中及是否有对应配置
  if (!store || !timeByDayByStore[store]) {
    return;
  }
  
  // 从日期字符串中提取星期几（例如"Friday, October 13, 2023"取第一个部分）
  var dayOfWeek = selectedDate.split(',')[0].trim();
  
  // 获取当前星期几对应的时间列表
  var timeList = timeByDayByStore[store][dayOfWeek];
  if (!timeList || timeList.length === 0) {
    return;
  }
  
  // 生成时间选项并添加到下拉框
  var timeOptions = timeList.map(function(time) {
    return `<option value="${time}">${time}</option>`;
  }).join('');
  
  $timeSelect.append(timeOptions);
}

关键修改点说明 #

1. 使用onSelect回调：替代原生change事件监听，确保用户通过Datepicker选择日期时一定会触发更新逻辑
2. 增加门店变化监听：用户切换门店后，若已选择日期则自动更新时间选项，提升交互体验
3. 提取星期几：通过split(',')[0]从日期字符串中提取星期几名称，与你的时间配置键完美匹配
4. 边界判断：处理门店未选、门店无配置、星期几无时间的情况，避免控制台报错
5. 封装函数：把更新时间选项的逻辑封装成独立函数，代码更清晰，便于后续维护和拓展

这样修改后，就能实现选择门店和日期后动态填充时间下拉框的功能啦！

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