如何根据另一个动态下拉列表的值创建一个动态下拉列表？

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

<select id="subList">
  <!-- 这里的选项会根据主列表的选择动态生成 -->
</select>

function updateSubList() {
  var mainList = document.getElementById("mainList");
  var subList = document.getElementById("subList");
  var selectedValue = mainList.value;

  // 清空从列表的选项
  subList.innerHTML = "";

  // 根据主列表的选择值生成从列表的选项
  if (selectedValue === "option1") {
    var option1 = document.createElement("option");
    option1.value = "subOption1";
    option1.text = "Sub Option 1";
    subList.appendChild(option1);
  } else if (selectedValue === "option2") {
    var option2 = document.createElement("option");
    option2.value = "subOption2";
    option2.text = "Sub Option 2";
    subList.appendChild(option2);
  } else if (selectedValue === "option3") {
    var option3 = document.createElement("option");
    option3.value = "subOption3";
    option3.text = "Sub Option 3";
    subList.appendChild(option3);
  }
}