Estoy tratando de hacer dos selecciones con algunas opciones de tiempo y no puedo encontrar la manera de resolver esto. Por ejemplo.
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 secondonePuede usar un detector de eventos en la hora de inicio. Luego recorra los tiempos de finalización para restablecer su configuración de desactivación a no desactivada y luego compare los valores.
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>