读取下拉列表选中项报错Uncaught TypeError: e.options is undefined怎么解决？

错误原因 #

你的HTML代码中，<label>和<select>的id都设置为raum。由于document.getElementById()会返回页面中第一个匹配该ID的元素，这里拿到的是<label>标签，而label元素并没有options属性，因此触发了类型错误。

修复步骤 #

1. 修正HTML的ID冲突
   给label设置唯一的ID，同时保持for属性与select的ID关联：

<label for="raum" id="raum-label">Raum</label>
<select name="raum" id="raum">
    <option value="wohnzimmer">wohnzimmer</option>
    <option value="Küche">Küche</option>
    <option value="schlafzimmer">schlalfzimmer</option>
</select>

2. （可选）简化选中值的获取方式
   不需要通过options和selectedIndex，直接使用select元素的value属性就能获取选中项的value，代码更简洁：

document.getElementById("eintragen").addEventListener("click", eintragen);

function eintragen(event) {
  event.preventDefault();
  laufendeNummer();
}

function laufendeNummer() {
  var e = document.getElementById('raum');
  var value = e.value; // 直接获取选中值

  console.log(value);
}

验证效果 #

修改完成后，点击eintragen按钮，控制台将正确输出下拉框选中的选项值。

内容的提问来源于stack exchange，提问作者Jörg Daniel Fluck