如何在一定时间后禁用 select 选项？

Question

是否可以仅使用html和javascript在超出时间范围后禁用选项？

 <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();
         
        if(hours < document.getElementById('time1').value){
            document.select.options[1].disabled = true;
        }
    }
    </script>

Answer 1

太近了！！

我认为你这里只有几处不对，但大部分都没有问题。这是它的修改版本，包含一些细节。

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

这不会自行更新，目前它将在他们已经点击了另一个选项后禁用（或者在他们点击了应该禁用的选项后，如果为时已晚（即下午 1 点不能select 上午 10 点))，因为 javascript 的 none 是被动的；它只会运行当 select 选项卡更改时。

Answer 2

不是在 onChange 事件时调用函数，而是在文档加载或文档准备就绪时调用。

对于这种特殊需求，如果您在选项值中有间隔是更好的方法，我使用了这样的间隔 value="10-11" 它代表 上午 10 点到上午 11 点。

如果您使用 getHours() 方法，它 returns 基于军事时间的小时数意味着 10pm 它将 return 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>

由此，你也可以增加分钟间隔，你自己试试吧。

如何在一定时间后禁用 select 选项？

how to disable select option after a certain time?

html

javascript

select

options