Home How can I disable the above options of a Select Time if I select a random time? JavaScript, JQuery

Questions

How can I disable the above options of a Select Time if I select a random time? JavaScript, JQuery

July 8, 2022

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

>Solution :

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>