如何隱藏一個<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>