如何解决如何将事件侦听器添加到菜单 js?
为什么单击某个项目时 menu.value 未定义?
代码:
let menu = document.getElementById("myDropdown");
menu.addEventListener("click",generateMap);
function generateMap(event) {
if (menu.value == "all") {
console.log("all");
} else if (menu.value == "a1") {
console.log("a1");
} else if (menu.value == "a2") {
console.log("a2");
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Select Building</button>
<div id="myDropdown" class="dropdown-content">
<option value="all">All</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
</div>
</div>
解决方法
您没有使用正确的 HTML 结构。
<option>
标签是 <select>
标签的子标签。
将 ID myDropdown
添加到您的 <select>
标签,然后您可以在该 select
标签上附加事件侦听器>
let menu = document.getElementById("myDropdown");
menu.addEventListener("click",generateMap);
function generateMap(event) {
if (menu.value == "all") {
console.log("all");
} else if (menu.value == "a1") {
console.log("a1");
} else if (menu.value == "a2") {
console.log("a2");
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="dropdown">
<select id="myDropdown">
<option value="" selected disabled>Select Building</option>
<option value="all">All</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
</select>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。