JavaScript实现下拉框联动
下面是一个简单的JavaScript实现下拉框联动的例子：
<!DOCTYPE html>
<html>
<head>
<title>下拉框联动示例</title>
<script>
function updateSelect(sel1, sel2){
var value = sel1.value;
if(value === "fruits"){
sel2.options.length = 0; // 清空第二个下拉框的选项
var option = document.createElement("option");
option.text = "苹果";
option.value = "apple";
sel2.add(option);
option = document.createElement("option");
option.text = "香蕉";
option.value = "banana";
sel2.add(option);
} else if(value === "vegetables"){
sel2.options.length = 0; // 清空第二个下拉框的选项
var option = document.createElement("option");
option.text = "胡萝卜";
option.value = "carrot";
sel2.add(option);
option = document.createElement("option");
option.text = "西红柿";
option.value = "tomato";
sel2.add(option);
} else {
sel2.options.length = 0; // 清空第二个下拉框的选项
}
}
</script>
</head>
<body>
<select onchange="updateSelect(this, document.getElementById('secondSelect'))" id="firstSelect">
<option value="">请选择一个类别</option>
<option value="fruits">水果</option>
<option value="vegetables">蔬菜</option>
</select>
<select id="secondSelect">
<option value="">请先选择一个类别</option>
</select>
</body>
</html>这段代码中，我们定义了一个updateSelect函数，它接受两个参数：sel1和sel2，分别代表第一个和第二个下拉框。当第一个下拉框的值改变时，onchange事件触发updateSelect函数，该函数根据第一个下拉框的值来动态更新第二个下拉框的选项。这个例子展示了如何通过JavaScript实现简单的下拉框联动效果。
评论已关闭