无法使用select隐藏和显示字段

<select>
  <option value="1" style="display: none;">隐藏字段1</option>
  <option value="2" style="display: none;">隐藏字段2</option>
  <option value="3">显示字段1</option>
  <option value="4">显示字段2</option>
</select>

<select onchange="toggleFields(this)">
  <option value="show">显示字段</option>
  <option value="hide">隐藏字段</option>
</select>

<input type="text" id="field1" style="display: none;">
<input type="text" id="field2" style="display: none;">

<script>
function toggleFields(selectElement) {
  var field1 = document.getElementById("field1");
  var field2 = document.getElementById("field2");

  if (selectElement.value === "show") {
    field1.style.display = "block";
    field2.style.display = "block";
  } else {
    field1.style.display = "none";
    field2.style.display = "none";
  }
}
</script>