使用纯 JavaScript 激活级联下拉自动选择的方法如下:
<select id="firstSelect">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<select id="secondSelect">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<select id="thirdSelect">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
document.getElementById("firstSelect").addEventListener("change", function() {
var firstSelectValue = this.value;
var secondSelect = document.getElementById("secondSelect");
// 清空第二个下拉列表的选项
secondSelect.innerHTML = '<option value="">请选择</option>';
// 根据选择的值动态生成第二个下拉列表的选项
if (firstSelectValue === "1") {
secondSelect.innerHTML += '<option value="1">选项1</option>';
secondSelect.innerHTML += '<option value="2">选项2</option>';
} else if (firstSelectValue === "2") {
secondSelect.innerHTML += '<option value="3">选项3</option>';
secondSelect.innerHTML += '<option value="4">选项4</option>';
} else if (firstSelectValue === "3") {
secondSelect.innerHTML += '<option value="5">选项5</option>';
secondSelect.innerHTML += '<option value="6">选项6</option>';
}
});
document.getElementById("secondSelect").addEventListener("change", function() {
var secondSelectValue = this.value;
var thirdSelect = document.getElementById("thirdSelect");
// 清空第三个下拉列表的选项
thirdSelect.innerHTML = '<option value="">请选择</option>';
// 根据选择的值动态生成第三个下拉列表的选项
if (secondSelectValue === "1") {
thirdSelect.innerHTML += '<option value="1">选项1</option>';
thirdSelect.innerHTML += '<option value="2">选项2</option>';
} else if (secondSelectValue === "2") {
thirdSelect.innerHTML += '<option value="3">选项3</option>';
thirdSelect.innerHTML += '<option value="4">选项4</option>';
} else if (secondSelectValue === "3") {
thirdSelect.innerHTML += '<option value="5">选项5</option>';
thirdSelect.innerHTML += '<option value="6">选项6</option>';
}
});
通过以上 JavaScript 代码,可以实现级联下拉列表的自动选择。根据第一个下拉列表的选择,动态更新第二个下拉列表的选项;根据第二个下拉列表的选择,动态更新第三个下拉列表的选项。这样,用户在选择第一个下拉列表和第二个下拉列表时,第三个下拉列表会根据选择的值自动更新选项。
参考腾讯云相关产品:无
注意:以上答案提供了实现级联下拉自动选择的 JavaScript 代码,但没有涉及云计算、互联网领域的专业知识。如需了解更多相关知识,请提供更具体的问题。
领取专属 10元无门槛券
手把手带您无忧上云