如何在<option>中设置条件

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<script>
  var selectElement = document.getElementById("mySelect");
  
  // 根据条件设置选项的可见性
  selectElement.addEventListener("change", function() {
    var selectedValue = selectElement.value;
    
    // 根据选中的值设置选项的可见性
    if (selectedValue === "option1") {
      // 设置选项2和选项3不可见
      selectElement.options[1].style.display = "none";
      selectElement.options[2].style.display = "none";
    } else if (selectedValue === "option2") {
      // 设置选项1和选项3不可见
      selectElement.options[0].style.display = "none";
      selectElement.options[2].style.display = "none";
    } else if (selectedValue === "option3") {
      // 设置选项1和选项2不可见
      selectElement.options[0].style.display = "none";
      selectElement.options[1].style.display = "none";
    } else {
      // 显示所有选项
      for (var i = 0; i < selectElement.options.length; i++) {
        selectElement.options[i].style.display = "block";
      }
    }
  });
</script>