隐藏和显示HTML选择选项

<form>
  <label for="fruit">选择水果：</label>
  <select id="fruit">
    <option value="apple">苹果</option>
    <option value="orange">橙子</option>
    <option value="banana">香蕉</option>
  </select>
</form>

var fruitSelect = document.getElementById("fruit");

fruitSelect.addEventListener("change", function() {
  var selectedFruit = fruitSelect.value;
  
  if (selectedFruit === "apple") {
    // 隐藏橙子和香蕉选项
    document.getElementById("orange").style.display = "none";
    document.getElementById("banana").style.display = "none";
  } else {
    // 显示所有选项
    document.getElementById("orange").style.display = "block";
    document.getElementById("banana").style.display = "block";
  }
});

option {
  display: block;
}