隐藏基于另一个选择字段的html选择字段中的条目

<select id="mainSelect" onchange="updateHiddenSelect()">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="hiddenSelect">
  <option value="hiddenOption1">Hidden Option 1</option>
  <option value="hiddenOption2">Hidden Option 2</option>
  <option value="hiddenOption3">Hidden Option 3</option>
</select>

function updateHiddenSelect() {
  var mainSelect = document.getElementById("mainSelect");
  var hiddenSelect = document.getElementById("hiddenSelect");

  // 获取主选择字段的值
  var selectedValue = mainSelect.value;

  // 根据主选择字段的值来隐藏或显示被隐藏选择字段中的条目
  if (selectedValue === "option1") {
    hiddenSelect.options[0].style.display = "none"; // 隐藏第一个条目
    hiddenSelect.options[1].style.display = "block"; // 显示第二个条目
    hiddenSelect.options[2].style.display = "block"; // 显示第三个条目
  } else if (selectedValue === "option2") {
    hiddenSelect.options[0].style.display = "block"; // 显示第一个条目
    hiddenSelect.options[1].style.display = "none"; // 隐藏第二个条目
    hiddenSelect.options[2].style.display = "block"; // 显示第三个条目
  } else if (selectedValue === "option3") {
    hiddenSelect.options[0].style.display = "block"; // 显示第一个条目
    hiddenSelect.options[1].style.display = "block"; // 显示第二个条目
    hiddenSelect.options[2].style.display = "none"; // 隐藏第三个条目
  }
}