如何根据一个选择创建多个动态选择框？

<select id="mainSelect" onchange="createDynamicSelect()">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

function createDynamicSelect() {
  // 获取主选择框的值
  var mainSelectValue = document.getElementById("mainSelect").value;

  // 根据主选择框的值创建新的选择框
  if (mainSelectValue === "option1") {
    var dynamicSelect = document.createElement("select");
    dynamicSelect.innerHTML = `
      <option value="">请选择</option>
      <option value="suboption1">子选项1</option>
      <option value="suboption2">子选项2</option>
      <option value="suboption3">子选项3</option>
    `;
    document.body.appendChild(dynamicSelect);
  } else if (mainSelectValue === "option2") {
    // 创建其他选择框的逻辑
  } else if (mainSelectValue === "option3") {
    // 创建其他选择框的逻辑
  }
}