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

填充(链式)依赖下拉列表是指根据前一个下拉列表的选择，动态填充后续下拉列表的选项。这种技术常用于表单中的级联选择，可以提供更好的用户体验和数据准确性。

实现填充(链式)依赖下拉列表的方法有多种，以下是一种常见的实现方式：

HTML结构：在HTML中，使用<select>标签创建下拉列表，并为每个下拉列表添加一个唯一的id属性。

<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>

JavaScript事件监听：使用JavaScript监听第一个下拉列表的选择事件，当选择发生变化时触发相应的函数。

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);
  }
}