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

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

CodePudding user response：

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 >
  <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>