如何隐藏一个<option>在<select>有if条件？

Question

所以这是用于调整缩放的工作 HTML。

我现在需要做的是如何使用 Javascript 隐藏带有 if 条件的 200 选项。

所以如果一个变量大于 200 选项，我需要隐藏它。

编辑：我解释错了，所以如果一个变量大于另一个变量，我需要隐藏 200 选项并显示 100、300 和 400。

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

请帮忙，我对这种语言不太了解。 谢谢你。

Answer 1

您可以使用任何文档查询方法选择select ，然后选择选项。 然后迭代选项并检查值。 如果值大于 200，则添加一个类来隐藏它

 const z = document.getElementsByName('chooseAZoom')[0].querySelectorAll('option').forEach((elem) => { if (elem.value >= 200) { elem.classList.add('hideOption') } })

 .hideOption { display: none }

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

Answer 2

您还可以从 DOM 中删除option标签。 经过：

• 从 DOM 中select标签，然后获取它的子option标签，将它们放在一个带有扩展语法的数组中。
• 如果您的变量大于 200，则过滤数组并删除value 200 的option标记。否则保留数组。
• 清除select中的所有option标签，然后遍历过滤后的数组并将选项标签附加回select

 let yourVariable = 201; const select = document.querySelector('select[name=chooseAZoom]'); const optArr = [...select.children]; const newOptArr = optArr.filter(opt => { if (yourVariable > 200) return opt.value != 200; return true; }) select.innerHTML = ""; newOptArr.forEach(opt => select.appendChild(opt));

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