如何填充(链式)依赖下拉列表

<select id="firstDropdown">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
</select>

<select id="secondDropdown">
  <option value="">请选择</option>
</select>

<select id="thirdDropdown">
  <option value="">请选择</option>
</select>

document.getElementById("firstDropdown").addEventListener("change", function() {
  // 获取第一个下拉列表的选中值
  var selectedValue = this.value;
  
  // 根据选中值填充第二个下拉列表
  populateSecondDropdown(selectedValue);
});

function populateSecondDropdown(selectedValue) {
  var secondDropdown = document.getElementById("secondDropdown");
  
  // 清空第二个下拉列表的选项
  secondDropdown.innerHTML = "";
  
  // 根据选中值填充第二个下拉列表的选项
  if (selectedValue === "option1") {
    var option1 = document.createElement("option");
    option1.value = "option1-1";
    option1.textContent = "选项1-1";
    secondDropdown.appendChild(option1);
    
    var option2 = document.createElement("option");
    option2.value = "option1-2";
    option2.textContent = "选项1-2";
    secondDropdown.appendChild(option2);
  } else if (selectedValue === "option2") {
    var option3 = document.createElement("option");
    option3.value = "option2-1";
    option3.textContent = "选项2-1";
    secondDropdown.appendChild(option3);
    
    var option4 = document.createElement("option");
    option4.value = "option2-2";
    option4.textContent = "选项2-2";
    secondDropdown.appendChild(option4);
  }
}