在不重新加载页面的情况下显示第二个相关下拉列表

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

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

document.getElementById("mainList").addEventListener("change", function() {
  var mainListValue = this.value;
  var relatedList = document.getElementById("relatedList");

  // 清空相关列表的选项
  relatedList.innerHTML = "";

  // 根据主列表的选择值生成相关列表的选项
  if (mainListValue === "option1") {
    relatedList.innerHTML += '<option value="relatedOption1">Related Option 1</option>';
    relatedList.innerHTML += '<option value="relatedOption2">Related Option 2</option>';
  } else if (mainListValue === "option2") {
    relatedList.innerHTML += '<option value="relatedOption3">Related Option 3</option>';
    relatedList.innerHTML += '<option value="relatedOption4">Related Option 4</option>';
  } else if (mainListValue === "option3") {
    relatedList.innerHTML += '<option value="relatedOption5">Related Option 5</option>';
    relatedList.innerHTML += '<option value="relatedOption6">Related Option 6</option>';
  }
});