如何通过JavaScript if条件隐藏select下拉框指定option选项

首先修正你原有HTML的语法问题：id="zoomAdjuster' 前后引号类型不匹配，会导致DOM选择失效，统一使用双引号即可。

核心实现逻辑 #

• 定位到下拉选择框中值为200的选项元素
• 执行两个变量的大小比较
• 当第一个变量大于第二个变量时，隐藏200选项，同时保证100、300、400选项正常显示；如果当前选中项刚好是200，自动切回默认的100选项避免交互异常
• 当判断条件不满足时，恢复200选项的显示

完整可运行代码 #

<div id="zoomAdjuster" class="centerAlign">
  <span>Zoom</span>
  <select name="chooseAZoom" id="zoomSelect">
     <option value="100" selected>100</option>
     <option value="200">200</option>
     <option value="300">300</option>
     <option value="400">400</option>
    </select>
</div>

<script>
// 替换成你实际业务里需要比较的两个变量即可
const compareValue1 = 300;
const compareValue2 = 150;

// 抓取对应DOM元素
const zoomSelect = document.getElementById('zoomSelect');
const option200 = zoomSelect.querySelector('option[value="200"]');

// 条件判断
if (compareValue1 > compareValue2) {
  option200.hidden = true;
  // 处理选中项为隐藏选项的边界情况
  if (option200.selected) {
    zoomSelect.querySelector('option[value="100"]').selected = true;
  }
} else {
  option200.hidden = false;
}
</script>

注意事项 #

• 隐藏option优先使用原生hidden属性，不要用display: none，部分低版本浏览器不支持option元素的display样式控制，会导致隐藏失效
• 如果你的两个比较变量是动态变化的，把条件判断的逻辑封装成函数，每次变量更新时调用一次函数即可实时更新选项显隐状态，不需要重复抓取DOM

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