如何生成一个三级可靠的下拉列表

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

document.getElementById("first-level").addEventListener("change", function() {
  var secondLevel = document.getElementById("second-level");
  var selectedOption = this.value;

  // 根据选择的一级选项生成对应的二级选项
  if (selectedOption === "option1") {
    // 清空二级下拉列表中的选项
    secondLevel.innerHTML = "";

    // 添加二级选项
    var option1 = document.createElement("option");
    option1.value = "option1-1";
    option1.text = "Option 1-1";
    secondLevel.appendChild(option1);

    var option2 = document.createElement("option");
    option2.value = "option1-2";
    option2.text = "Option 1-2";
    secondLevel.appendChild(option2);

    // 其他二级选项...
  } else if (selectedOption === "option2") {
    // 生成 option2 对应的二级选项...
  } else if (selectedOption === "option3") {
    // 生成 option3 对应的二级选项...
  }
});

document.getElementById("second-level").addEventListener("change", function() {
  var thirdLevel = document.getElementById("third-level");
  var selectedOption = this.value;

  // 根据选择的二级选项生成对应的三级选项
  if (selectedOption === "option1-1") {
    // 清空三级下拉列表中的选项
    thirdLevel.innerHTML = "";

    // 添加三级选项
    var option1 = document.createElement("option");
    option1.value = "option1-1-1";
    option1.text = "Option 1-1-1";
    thirdLevel.appendChild(option1);

    var option2 = document.createElement("option");
    option2.value = "option1-1-2";
    option2.text = "Option 1-1-2";
    thirdLevel.appendChild(option2);

    // 其他三级选项...
  } else if (selectedOption === "option1-2") {
    // 生成 option1-2 对应的三级选项...
  }
  // 其他二级选项对应的三级选项...
});

<select id="third-level">
  <!-- 三级选项将由 JavaScript 动态生成 -->
</select>