填充(链式)依赖下拉列表是指根据前一个下拉列表的选择,动态填充后续下拉列表的选项。这种技术常用于表单中的级联选择,可以提供更好的用户体验和数据准确性。
实现填充(链式)依赖下拉列表的方法有多种,以下是一种常见的实现方式:
<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);
}
}
通过以上步骤,就可以实现填充(链式)依赖下拉列表的功能。根据实际需求,可以扩展更多的下拉列表和选项。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云