如何在一定时间后禁用选择选项？答案

【问题标题】：How to disable select option after a certain time?如何在一定时间后禁用选择选项？
【发布时间】：2022-07-18 17:22:43
【问题描述】：

是否可以在超出时间范围后仅使用 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>

【问题讨论】：

是的，您需要使用间隔。寻找setInterval函数。

标签： javascript html html-select

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

这么近！！

我认为您这里只有一些问题，但大部分都很好。这是它的修改版本，包含一些细节。

 <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 点无法选择上午 10 点） ))，因为没有一个 javascript 是反应式的；它只会在选择选项卡更改时运行。

【讨论】：