Javascript 如何使用JS/jQuery验证两个下拉字段中的时间值？

我有一个包含“从”和“到”下拉列表的表单，其中包含时间值。 看起来是这样的：

From
<select class="from">
<option value="09:00 AM">09:00 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:15 AM">10:15 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="10:45 AM">10:45 AM</option>
<option value="11:00 AM">11:00 AM</option>
...
</select>

To
<select class="to">
<option value="10:00 AM">10:00 AM</option>
<option value="10:15 AM">10:15 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="10:45 AM">10:45 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:15 AM">11:15 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="11:45 AM">11:45 AM</option>
<option value="12:00 PM">12:00 PM</option>
...
</select>

来自
上午9:00
上午10:00
上午10:15
上午10:30
上午10:45
上午11:00
...
到
上午10:00
上午10:15
上午10:30
上午10:45
上午11:00
上午11:15
上午11:30
上午11:45
下午12:00
...

我想防止人们选择“from”的时间等于或晚于“to”，例如从上午11点到上午9点以及其他没有意义的组合

我正在使用和jQuery。 我包含了date.min.js脚本，并获得了以下代码，几乎实现了这一目的：

$('.from').on('change', function(e) {
  var from_time = Date.parse($(this).val());

  // Ensure 1 hour difference
  var from_time_adj = new Date();
  from_time_adj.setTime(from_time.getTime() + (60 * 60 * 1000));

  $('.to option').each(function(index, el) {
    var to_time = Date.parse($(el).val());
    if (to_time < from_time_adj) {
      $(el).attr('disabled', true);
    }
  });
});


$('.to').on('change', function(e) {
  var to_time = Date.parse($(this).val());

  // Ensure 1 hour difference
  var to_time_adj = new Date();
  to_time_adj.setTime(to_time.getTime() - (60 * 60 * 1000));

  $('.from option').each(function(index, el) {
    var from_time = Date.parse($(el).val());
    if (from_time > to_time_adj) {
      $(el).attr('disabled', true);
    }
  });
});

$（'.from'）。关于（'change'，函数（e）{
var from_time=Date.parse（$（this.val（））；
//确保1小时的差异
var from_time_adj=新日期（）；
from_time_adj.setTime（from_time.getTime（）+（60*60*1000））；
$（'.to option'）。每个（函数（索引，el）{
var to_time=Date.parse（$（el.val（））；
如果（到时间<从时间调整）{
$（el）.attr（'disabled'，true）；
}
});
});
$（'.to'）。关于（'change'，函数（e）{
var to_time=Date.parse（$（this.val（））；
//确保1小时的差异
var to_time_adj=新日期（）；
to_time_adj.setTime（to_time.getTime（）-（60*60*1000））；
$（'.from选项'）。每个（函数（索引，el）{
var from_time=Date.parse（$（el.val（））；
如果（从时间>到时间）{
$（el）.attr（'disabled'，true）；
}
});
});

下面是整个“几乎可以工作”的事情：

它在某个时候变得很奇怪，例如：

步骤1：从上午11:00开始设置-没问题

步骤2：将设置为下午2:00-没问题

步骤3：将设置为晚上8:00-哎呀！此时，的已在下午1:00后禁用所有功能

有什么好处？在2次左右的改变后，它开始做这种奇怪的事情。进一步尝试使用from/to值显示了这一点

---

我意识到代码逻辑中有一个bug，但我找不到它。

您也需要启用：

$（'.from'）。关于（'change'，函数（e）{
var from_time=Date.parse（$（this.val（））；
var from_time_adj=新日期（）；
from_time_adj.setTime（from_time.getTime（）+（60*60*1000））；
$（'.to option'）。每个（函数（索引，el）{
var to_time=Date.parse（$（el.val（））；
$（el）.attr（'disabled'，to_timeto_time_adj）；//语句为true时禁用，为false时启用
});
});

谢谢@mplungjan。我在这方面不是很高级，所以我没有完全理解：（我如何以正确的顺序重新启用以前禁用的选项？使用您的测试而不是true您的意思是将

$（el.attr（'disabled'，true）；

更改为

$（el.attr（'disabled'，to_time

？恐怕我不明白…

true

是一个布尔值，从时间到时间的

结果也是一个布尔值，例如true或false。它可以完成以下任务：不，不可以。尝试从上午11点设置到下午2点，然后再次从下拉列表中进行检查。您的代码只验证单向-当您第一次从X设置到Y时。第二次尝试时，您可以n选择从晚上8点到下午2点等。