如何在下拉菜单中集成下拉菜单

<select id="firstDropdown">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
</select>

<select id="secondDropdown">
  <option value="">请选择</option>
  <optgroup label="选项1">
    <option value="subOption1">子选项1</option>
    <option value="subOption2">子选项2</option>
  </optgroup>
  <optgroup label="选项2">
    <option value="subOption3">子选项3</option>
    <option value="subOption4">子选项4</option>
  </optgroup>
</select>

// 获取第一级下拉菜单和第二级下拉菜单的元素
var firstDropdown = document.getElementById("firstDropdown");
var secondDropdown = document.getElementById("secondDropdown");

// 监听第一级下拉菜单的change事件
firstDropdown.addEventListener("change", function() {
  // 清空第二级下拉菜单的选项
  secondDropdown.innerHTML = '<option value="">请选择</option>';

  // 根据第一级下拉菜单的选项值，动态生成第二级下拉菜单的选项
  if (firstDropdown.value === "option1") {
    var optgroup = document.createElement("optgroup");
    optgroup.label = "选项1";
    var option1 = document.createElement("option");
    option1.value = "subOption1";
    option1.textContent = "子选项1";
    var option2 = document.createElement("option");
    option2.value = "subOption2";
    option2.textContent = "子选项2";
    optgroup.appendChild(option1);
    optgroup.appendChild(option2);
    secondDropdown.appendChild(optgroup);
  } else if (firstDropdown.value === "option2") {
    var optgroup = document.createElement("optgroup");
    optgroup.label = "选项2";
    var option3 = document.createElement("option");
    option3.value = "subOption3";
    option3.textContent = "子选项3";
    var option4 = document.createElement("option");
    option4.value = "subOption4";
    option4.textContent = "子选项4";
    optgroup.appendChild(option3);
    optgroup.appendChild(option4);
    secondDropdown.appendChild(optgroup);
  }
});