JS Onchange处理前显示值

Question

我有一个带有select输入元素的form。用户选择一个选项后，我会检查所选的选项。如果它比我预期的要大，我会弹出一个alert框，询问用户是否确定他们选择了正确的选项。这只是一个警告，所以我不会重置值或阻止用户选择这些选项。

目前，这会导致首先显示alert，然后在它们达到OK后更改网页上的选项。

在onchange事件期间处理之前，如何获取select元素中的值以显示选择？

mySelectElement.onchange = function() {
if(mySelectElement.value >= 1000) {
alert("Are you sure you can eat that many apples?");
}
// else nothing, less than 1000
};

Answer 1

两个解决方案，其中一个不使用警报。您可以使用模态库，也可以直接输出到dom。

如果必须使用警报，请将其封装在setTimeout中，使其延迟。

let select = document.querySelector("select");
select.addEventListener("change",function(){
if(select.value > 1){
setTimeout(function(){alert("Alert");},100);
} 
});

<select ><option value="0">A</option><option value="3">3</option></select>