HTML下拉框触发Map数据弹窗失效问题求助

我帮你梳理下两段代码里的核心问题，其实都是语法和逻辑上的小疏漏，咱们一步步修正：

• EXAMPLE-1：函数里的document.getElementsByName(name)是完全错误的语法，而且你没正确获取下拉框选中的姓名；另外明明已经用Map存了数据，还要硬编码一堆if-else，完全没必要~
• EXAMPLE-2：给元素绑定事件的写法彻底错了，获取选中值的逻辑混乱，遍历Map的方式也不对。

直接上能正常运行的正确实现：

第一步：修正HTML结构 #

给下拉框加个id方便JS获取，同时把option的name属性换成value（这才是存储选项对应值的标准属性）：

<body>
  <select id="studentSelect">
    <option value="">Select Name for score</option>
    <option value="John">John</option>
    <option value="Tom">Tom</option>
    <option value="Kate">Kate</option>
    <option value="Lisa">Lisa</option>
    <option value="Ziva">Ziva</option>
  </select>
</body>

第二步：编写正确的JS逻辑 #

用addEventListener给下拉框绑定change事件（比onclick更精准，只有选中新选项时才触发），然后获取选中的姓名，从Map里取出对应成绩弹窗：

// 初始化成绩Map
const gradeMap = new Map();
gradeMap.set("John", 55);
gradeMap.set("Tom", 60);
gradeMap.set("Kate", 70);
gradeMap.set("Lisa", 65);
gradeMap.set("Ziva", 85);

// 获取下拉框元素
const selectElement = document.getElementById('studentSelect');

// 绑定change事件
selectElement.addEventListener('change', function() {
  const selectedName = this.value;
  // 判断是否选中了有效选项
  if (selectedName) {
    const score = gradeMap.get(selectedName);
    alert(`${selectedName}'s score is ${score}`);
  } else {
    alert("Please select a valid student");
  }
});

补个小解释：为什么之前的代码不行？ #

1. 没正确获取选中值：要通过下拉框的value属性拿到选中选项的value值，而不是去读option的name属性
2. 语法错误：比如EXAMPLE-1里的document.getElementsByName(name)是非法写法，JS里不能这么写代码块
3. 事件绑定错误：EXAMPLE-2里直接给元素赋值函数的写法完全错误，应该用事件监听或者正确的onxxx属性赋值

把上面的代码整合到HTML里就能正常运行啦，点击下拉选项就会弹出对应学生的成绩~

内容的提问来源于stack exchange，提问作者OBI