如何将事件侦听器添加到菜单 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>