如果选择的时间是随机的，如何禁用以上选项?JavaScript JQuery

Question

我试图用一些时间选项进行两次选择，我不知道如何解决这个问题。例如,

If I chose 08:30:00 in the first select, I shouldn't chose 08:00:00 08:10:00 08:20:00 on the secondone.   
<select>
<option selected disabled value="0">--Choose Start Time--</option>
<option value="08:00:00">08:00:00</option>
<option value="08:10:00">08:10:00</option>
<option value="08:20:00">08:20:00</option>
<option value="08:30:00">08:30:00</option>
<option value="08:40:00">08:40:00</option>
<option value="08:50:00">08:50:00</option>
</select> 

<select>
<option selected disabled value="0">--Choose End Time--</option>
<option value="08:00:00">08:00:00</option>
<option value="08:10:00">08:10:00</option>
<option value="08:20:00">08:20:00</option>
<option value="08:30:00">08:30:00</option>
<option value="08:40:00">08:40:00</option>
<option value="08:50:00">08:50:00</option>
</select>
For example.
If I chose 08:30:00 in the first select, I shouldn't chose 08:00:00 08:10:00 08:20:00 on the 
secondone

Answer 1

可以在开始时间上使用事件侦听器。然后循环遍历结束时间，将其禁用设置重置为未禁用，然后比较值。

let startTime = document.querySelector(".start-time");
let endTime = document.querySelectorAll(".end-time option");
startTime.addEventListener("change", function() {
_val = this.value;
let _disabled = document.querySelectorAll(".end-time option:disabled");

if(_disabled){
_disabled.forEach(function(end) {end.disabled = false;});//set all previously disabled options to be enabled
}

endTime.forEach(function(end) {
if(end.value < _val && end.value != ""){
end.disabled = true;
}
});
});

<select class="start-time">
<option selected disabled value="0">--Choose Start Time--</option>
<option value="08:00:00">08:00:00</option>
<option value="08:10:00">08:10:00</option>
<option value="08:20:00">08:20:00</option>
<option value="08:30:00">08:30:00</option>
<option value="08:40:00">08:40:00</option>
<option value="08:50:00">08:50:00</option>
</select>

<select class="end-time">
<option selected disabled value="0">--Choose End Time--</option>
<option value="08:00:00">08:00:00</option>
<option value="08:10:00">08:10:00</option>
<option value="08:20:00">08:20:00</option>
<option value="08:30:00">08:30:00</option>
<option value="08:40:00">08:40:00</option>
<option value="08:50:00">08:50:00</option>
</select>