如何在HTML表单中使用一个Select>Option来启用另一个Select>Option

<select id="firstSelect">
  <!-- options -->
</select>

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

<select id="secondSelect">
  <!-- options -->
</select>

<script>
  var firstSelect = document.getElementById("firstSelect");
  var secondSelect = document.getElementById("secondSelect");

  firstSelect.addEventListener("change", function() {
    var selectedOption = firstSelect.options[firstSelect.selectedIndex].value;

    // 根据选择的选项更新第二个下拉列表框的选项
    if (selectedOption === "option1") {
      // 更新第二个下拉列表框的选项
      secondSelect.innerHTML = `
        <option value="suboption1">Suboption 1</option>
        <option value="suboption2">Suboption 2</option>
        <option value="suboption3">Suboption 3</option>
      `;
    } else if (selectedOption === "option2") {
      // 更新第二个下拉列表框的选项
      secondSelect.innerHTML = `
        <option value="suboption4">Suboption 4</option>
        <option value="suboption5">Suboption 5</option>
        <option value="suboption6">Suboption 6</option>
      `;
    } else if (selectedOption === "option3") {
      // 更新第二个下拉列表框的选项
      secondSelect.innerHTML = `
        <option value="suboption7">Suboption 7</option>
        <option value="suboption8">Suboption 8</option>
        <option value="suboption9">Suboption 9</option>
      `;
    }
  });
</script>