下拉菜单选项非空却报Uncaught TypeError: Cannot read properties of null (reading 'options')？求修复

编写的JS函数希望实现两个功能：

• 将选中的下拉菜单值赋值给变量menuItem
• 用户更改任一菜单时，重置另外三个菜单的选中状态

但运行时始终抛出错误：Uncaught TypeError: Cannot read properties of null (reading 'options')（报错位置在JS代码第3行），检查后发现所有下拉菜单的选项都有值，无法定位问题原因。

错误原因 #

这个错误和选项是否有值完全无关，核心问题是函数参数传递和使用不匹配：
在HTML的onchange事件中，你写的是setMenuValue(MenuOne)，这里的MenuOne是浏览器自动把DOM元素映射成的全局变量（非标准行为），也就是说你传给函数的是一个DOM元素对象；但在JS函数里，你却用document.getElementById(menuId)去查找元素——相当于用一个DOM对象当作ID字符串去查询，自然找不到任何元素，返回null，而null没有options属性，所以触发了这个错误。

修复方案 #

提供两种可行的修复方式，推荐第二种更规范的写法：

方式一：直接使用传入的DOM元素 #

不需要修改HTML，只调整JS函数，直接使用传入的DOM元素对象，同时添加重置其他菜单的逻辑：

function setMenuValue(menuElement) {
  // 直接通过传入的DOM元素获取选中选项
  var selectedOption = menuElement.options[menuElement.selectedIndex];
  var menuItem = selectedOption.value;

  // 重置其他三个菜单为默认选项（value=9999）
  const allMenus = document.querySelectorAll('.TestMenu');
  allMenus.forEach(menu => {
    // 跳过当前操作的菜单，重置其余菜单
    if (menu !== menuElement) {
      menu.value = '9999';
    }
  });
}

方式二：传递ID字符串（推荐） #

这种写法更符合前端开发规范，把HTML结构和JS逻辑分离，避免依赖全局变量：

1. 修改HTML，把onchange的参数改为字符串形式的元素ID：

<label for="label">Select a menu item:</label>
<select id="MenuOne" class="TestMenu" onchange="setMenuValue('MenuOne')">
  <option selected value="9999">Numbers</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>
<select id="MenuTwo" class="TestMenu" onchange="setMenuValue('MenuTwo')">
  <option selected value="9999">Phonetics</option>
  <option value="alpha">Alpha</option>
  <option value="bravo">Bravo</option>
  <option value="charlie">Charlie</option>
</select>
<select id="MenuThree" class="TestMenu" onchange="setMenuValue('MenuThree')">
  <option selected value="9999">RGB</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<select id="MenuFour" class="TestMenu" onchange="setMenuValue('MenuFour')">
  <option selected value="9999">Pets</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="hamster">Hamster</option>
</select>
<div id="label"></div>

2. 调整JS函数，根据ID获取元素，并添加重置逻辑：

function setMenuValue(menuId) {
  // 根据ID获取DOM元素，增加判断避免找不到元素的情况
  const menuElement = document.getElementById(menuId);
  if (!menuElement) return;

  var selectedOption = menuElement.options[menuElement.selectedIndex];
  var menuItem = selectedOption.value;

  // 重置其他三个菜单
  const allMenus = document.querySelectorAll('.TestMenu');
  allMenus.forEach(menu => {
    if (menu.id !== menuId) {
      menu.value = '9999';
    }
  });
}

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