如何在一段时间后禁用选择选项?

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

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

对于这种特殊需要，如果您在选项值中设置间隔，则是更好的方法，我使用了这样的间隔value="10-11"，它代表10am到11am.

如果您使用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>

从这里，你也可以添加分钟间隔，继续自己尝试。

Answer 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是响应;它只会在select TAB改变时运行。