基于另一个选择框的值动态加载选择框的选项，但从属选择不是缺省为第一个选项

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

<select id="subSelect">
  <option value="">Please select</option>
</select>

function loadOptions() {
  var mainSelect = document.getElementById("mainSelect");
  var subSelect = document.getElementById("subSelect");
  var selectedValue = mainSelect.value;

  // 清空从属选择框的选项
  subSelect.innerHTML = "";

  // 根据主选择框的值动态生成从属选择框的选项
  if (selectedValue === "option1") {
    subSelect.innerHTML += '<option value="suboption1">Suboption 1</option>';
    subSelect.innerHTML += '<option value="suboption2">Suboption 2</option>';
  } else if (selectedValue === "option2") {
    subSelect.innerHTML += '<option value="suboption3">Suboption 3</option>';
    subSelect.innerHTML += '<option value="suboption4">Suboption 4</option>';
  } else if (selectedValue === "option3") {
    subSelect.innerHTML += '<option value="suboption5">Suboption 5</option>';
    subSelect.innerHTML += '<option value="suboption6">Suboption 6</option>';
  }
}