找不到如何绑定2下拉列表

<select id="firstDropdown">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select id="secondDropdown">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
  <option value="C">Option C</option>
</select>

document.getElementById("firstDropdown").addEventListener("change", function() {
  var firstValue = this.value;
  
  // 根据第一个下拉列表的选择更新第二个下拉列表的选项
  if (firstValue === "1") {
    updateSecondDropdownOptions(["Option X", "Option Y", "Option Z"]);
  } else if (firstValue === "2") {
    updateSecondDropdownOptions(["Option P", "Option Q", "Option R"]);
  } else if (firstValue === "3") {
    updateSecondDropdownOptions(["Option M", "Option N", "Option O"]);
  }
});

function updateSecondDropdownOptions(options) {
  var secondDropdown = document.getElementById("secondDropdown");
  secondDropdown.innerHTML = ""; // 清空原有选项
  
  options.forEach(function(option) {
    var optionElement = document.createElement("option");
    optionElement.value = option;
    optionElement.textContent = option;
    secondDropdown.appendChild(optionElement);
  });
}