I'm tryign to made two selects with some time options and I can't figure it out how to resolve this. 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.
<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
You can use an event listener on the start time. Then loop through the end times to reset their disable setting to not disabled then compare the values.
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>