如何根据下拉菜单选中项显示或隐藏<option>选项？

我想根据另一个下拉菜单的选中结果隐藏某个<option>选项，但尝试的代码未能生效，求解答！

HTML代码 #

<div class="form-group" id="band_pma_class">
  <label for="band_pma_id">Band (PMA)</label>
  <select class="form-control" id="band_pma_id" name="band_pma">
    <option value="" selected> Select </option>
    <option value="four_pma" id="hide_pma_id"> B4 </option>
    <option value="five_pma"> B5 </option>
    <option value="six_pma"> B6 </option>
    <option value="seven_pma"> B7 </option>
  </select>

JavaScript代码 #

function disableBand(answer) {
  console.log(answer.value);
  if (answer.value == 1 || answer.value == 4) {
    document.getElementById('hide_pma_id').setAttribute('hidden');
  }
}

问题分析与解决方案 #

核心问题 #

1. hidden属性兼容性差：<option>元素的hidden属性在部分浏览器中不生效，这是代码失效的主要原因。
2. 逻辑匹配错误：你的判断条件是answer.value == 1 || answer.value == 4，但提供的HTML中没有值为1或4的选项，且未展示触发逻辑的另一个下拉菜单，导致判断逻辑无法触发。
3. 属性设置不规范：setAttribute('hidden')应补全属性值，写成setAttribute('hidden', 'hidden')或直接用element.hidden = true，但这仍解决不了兼容性问题。

可行解决方案 #

方案1：禁用+CSS隐藏（兼容多数浏览器）

假设你有一个触发用的下拉菜单（示例中id为trigger_select），通过它的选中值控制目标选项的显示：

<!-- 触发下拉菜单 -->
<div class="form-group">
  <label for="trigger_select">触发条件</label>
  <select class="form-control" id="trigger_select" onchange="disableBand(this)">
    <option value="" selected>选择触发条件</option>
    <option value="1">选项1</option>
    <option value="4">选项4</option>
    <option value="other">其他选项</option>
  </select>
</div>

<!-- 目标下拉菜单 -->
<div class="form-group" id="band_pma_class">
  <label for="band_pma_id">Band (PMA)</label>
  <select class="form-control" id="band_pma_id" name="band_pma">
    <option value="" selected> Select </option>
    <option value="four_pma" id="hide_pma_id"> B4 </option>
    <option value="five_pma"> B5 </option>
    <option value="six_pma"> B6 </option>
    <option value="seven_pma"> B7 </option>
  </select>
</div>

<script>
function disableBand(answer) {
  const targetOption = document.getElementById('hide_pma_id');
  if (answer.value === '1' || answer.value === '4') {
    // 禁用+隐藏，双重保障
    targetOption.disabled = true;
    targetOption.style.display = 'none';
  } else {
    // 恢复可选中状态与显示
    targetOption.disabled = false;
    targetOption.style.display = '';
  }
}
</script>

方案2：移除/重新添加选项（彻底隐藏）

如果需要完全移除选项而非仅禁用，可以用DOM操作实现：

function disableBand(answer) {
  const select = document.getElementById('band_pma_id');
  const targetOption = document.getElementById('hide_pma_id');
  if (answer.value === '1' || answer.value === '4') {
    // 仅当选项存在时移除
    if (targetOption.parentNode === select) {
      select.removeChild(targetOption);
    }
  } else {
    // 选项已被移除时重新添加到指定位置
    if (!targetOption.parentNode) {
      select.insertBefore(targetOption, select.children[1]);
    }
  }
}

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