¡¡Tan cerca!!

Creo que solo tienes algunas cosas mal aquí, pero la mayoría está bien. Aquí hay una versión modificada del mismo, con algunos detalles.

 <select onchange="myFunction()"> <option value="" disabled selected>Select delivery time</option> <option value="10">10.00 AM - 12.00 PM</option> <option value="1">1.00 PM - 3.00 PM</option> <option value="3">3.00 PM - 7.00 PM</option> </select> <script> function myFunction(){ const b = new Date(); let hours = b.getHours(); // document.getElementById('time1') - // elements with id of 'time1' aren't present in the // page, so we probably want to grab each <option> // This will grab all the option elements on the page const optionElements = document.querySelectorAll("select > option") // harding the '10.00 AM - 12.00 PM' <option>, // tag here, but you can loop over them like an array // we also may want to Number() cast // Ex: // Number(optionElements[1].value) // or // parseInt(optionElements[1].value) if(hours < optionElements[1].value){ optionElements[1].disabled = true } } </script>

Esto no se actualizará por sí solo, y actualmente se deshabilitará después de que ya hayan hecho clic en otra opción (o después de que hayan hecho clic en la opción que debería estar deshabilitada si es demasiado tarde (es decir, la 1 p. m. no puede seleccionar las 10 a. m.)), ya que ninguno de los javascript es reactivo; solo se ejecutará cuando cambie la pestaña de selección.

En lugar de llamar a la función en el evento onChange , llame al cargar el documento o cuando el documento esté listo.

Para esta necesidad particular, es un mejor enfoque si tiene sus intervalos en valores de opciones, utilicé un intervalo como este value="10-11" que representa de 10 a.m. a 11 a.m.

Si usa el método getHours() , devuelve las horas en horario militar, lo que significa que para las 10 p.m. devolverá 22 .

 let element = document.getElementById('time1'); let validateInterval = (element) => { let currentDate = new Date(); let currentHour = currentDate.getHours(); for (let opt of element.options) { let timeOpt = opt.value.split('-'); if (Array.isArray(timeOpt) && timeOpt.length > 1) { opt.disabled = (+timeOpt[0] <= currentHour && +timeOpt[1] > currentHour) ? false : true; } } } validateInterval(element);

 <select id="time1"> <option value="" disabled selected>Select delivery time</option> <option value="10-12">10:00 AM - 12:00 PM</option> <option value="13-15">1:00 PM - 3:00 PM</option> <option value="15-19">3:00 PM - 7:00 PM</option> <option value="20-22">8:00 PM - 10:00 PM</option> <option value="21-23">9:00 PM - 11:00 PM</option> <option value="22-23">10:00 PM - 11:00 PM</option> </select>

A partir de esto, también puede agregar intervalos de minutos, siga adelante e inténtelo usted mismo.