如何使用jQuery实现下拉时间选择框仅展示当前时间50分钟后的选项

要实现这个需求，我们需要精确对比当前时间+50分钟后的时间与下拉框选项中的时间，而不是只比较小时维度。以下是修改后的完整代码及详细说明：

修改后的代码 #

$(function() {
  // 获取当前时间
  var now = new Date();
  // 计算当前时间加上50分钟后的目标时间（毫秒数转换）
  var targetTime = new Date(now.getTime() + 50 * 60 * 1000);

  // 过滤并移除早于目标时间的选项
  $('#delyvery-hour option').filter(function() {
    // 拆分选项的时分值，转换为数字类型
    var [optionHour, optionMinute] = this.value.split(':').map(Number);
    // 创建选项对应当天的时间对象，确保时间对比的准确性
    var optionDateTime = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate(),
      optionHour,
      optionMinute
    );
    // 若选项时间早于目标时间，则标记为需要移除
    return optionDateTime < targetTime;
  }).remove();
});

代码逻辑说明 #

1. 精确计算目标时间：通过now.getTime()获取当前时间的毫秒数，加上50分钟对应的毫秒数（50*60*1000），生成50分钟后的时间对象targetTime，这种方式能完美处理跨小时、甚至跨天的边界情况（比如当前是23:20，加50分钟后是次日00:10）。
2. 逐选项时间对比：
   • 拆分每个选项的value为小时和分钟，转换为数字以便后续计算。
   • 为每个选项创建当天对应的时间对象，确保和目标时间在同一日期维度下对比，避免跨天的时间比较误差。
   • 对比选项时间与目标时间，移除所有早于目标时间的选项。

与原代码的核心区别 #

原代码仅通过parseInt(this.value,10)提取小时数进行对比，完全忽略了分钟的影响，逻辑上无法满足“50分钟后”的精确需求。修改后的代码则基于完整的时分时间维度进行对比，能准确过滤出符合要求的选项：

• 当当前时间为18:00时，目标时间是18:50，所有18:00到18:45的选项都会被移除，只保留18:50及以后的选项。
• 当当前时间为19:20时，目标时间是20:10，如果下拉框中没有20:10及以后的选项，所有选项都会被移除（可根据需求添加兜底提示，比如新增<option value="">暂无可用时间</option>）。

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