我有这个<select>
列表采用不同的选项并根据单击的选项重新路由。 html代码为:
<select id="pageSelect" name="Choose Page" onchange="location = this.value">
<option value='' disabled selected hidden>Choose Page</option>
<option value='/page-1'>Page 1</option>
<option value='/page-2'>Page 2</option>
<option value="allPages" >Custom Page</option>
</select>
前 2 页的重新路由按预期工作。但是,第三个选项将使用自定义 Javascript 函数来处理,而不是由 <select>
中声明的 onchange 函数处理。元素。
最后一个<option>
的自定义函数是:
$('#pageSelect').change(function(event) {
event.preventDefault()
var pagesvalueselect = $(this).val();
if(pagesvalueselect=="allPages"){
$('#siteSaleModal').modal("show"); //Open Modal
}
});
该功能有效,当用户单击最后一个选项时,它会触发弹出模式,但它仍然将用户重定向到基于 value="allPages"
的另一个页面。即使我正在使用 preventDefault()
功能。
最佳答案
preventDefault()
调用仅停止当前 change
事件处理程序。您通过 onchange
属性分配的那个仍然会运行,因为它是完全独立的。
要解决此问题并改进代码,请删除 onchange
属性(因为它们已经过时,现在被认为是不好的做法),并将它们合并到一个不显眼的事件处理程序中。
$('#pageSelect').change(function(event) {
event.preventDefault()
var pagesvalueselect = $(this).val();
if (pagesvalueselect == "allPages") {
console.log('open modal...');
//$('#siteSaleModal').modal("show"); //Open Modal
} else {
console.log('redirecting to ' + pagesvalueselect + '...');
//window.location.assign(pagesvalueselect);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pageSelect" name="Choose Page">
<option value="" disabled="true" selected="true" hidden>Choose Page</option>
<option value="/page-1">Page 1</option>
<option value="/page-2">Page 2</option>
<option value="allPages">Custom Page</option>
</select>
关于javascript - PreventDefault() 不适用于特定选项选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60043773/