温馨提示：这篇文章已超过246天没有更新，请注意相关的内容是否还可用！
JavaScript级联是指在网页中使用JavaScript代码来实现多个下拉框之间的联动效果。当一个下拉框的选项发生变化时，另一个或多个下拉框的选项也会相应地发生变化。
以下是一个简单的示例，演示了如何使用JavaScript实现级联效果：
<!DOCTYPE html>
<html>
<head>
<title>级联示例</title>
</head>
<body>
<select id="country" onchange="changeCountry()">
<option value="">请选择国家</option>
<option value="china">中国</option>
<option value="us">美国</option>
<option value="uk">英国</option>
</select>
<select id="city" onchange="changeCity()">
<option value="">请选择城市</option>
</select>
<script>
function changeCountry() {
var countrySelect = document.getElementById("country");
var citySelect = document.getElementById("city");
// 清空城市下拉框的选项
citySelect.innerHTML = "<option value=''>请选择城市</option>";
// 根据选中的国家，动态添加对应的城市选项
if (countrySelect.value === "china") {
citySelect.innerHTML += "<option value='beijing'>北京</option>";
citySelect.innerHTML += "<option value='shanghai'>上海</option>";
citySelect.innerHTML += "<option value='guangzhou'>广州</option>";
} else if (countrySelect.value === "us") {
citySelect.innerHTML += "<option value='newyork'>纽约</option>";
citySelect.innerHTML += "<option value='losangeles'>洛杉矶</option>";
citySelect.innerHTML += "<option value='chicago'>芝加哥</option>";
} else if (countrySelect.value === "uk") {
citySelect.innerHTML += "<option value='london'>伦敦</option>";
citySelect.innerHTML += "<option value='manchester'>曼彻斯特</option>";
citySelect.innerHTML += "<option value='birmingham'>伯明翰</option>";
}
}
function changeCity() {
var citySelect = document.getElementById("city");
var selectedCity = citySelect.value;
// 打印选中的城市
console.log("选中的城市是：" + selectedCity);
}
</script>
</body>
</html>
在上面的示例中，我们有两个下拉框，一个是“country”（国家），另一个是“city”（城市）。当“country”下拉框的选项发生变化时，触发`changeCountry()`函数，该函数会根据选中的国家动态添加对应的城市选项到“city”下拉框中。
例如，如果选择了“中国”，则会在“city”下拉框中添加北京、上海和广州等选项。同样地，如果选择了“美国”，则会添加纽约、洛杉矶和芝加哥等选项。
当“city”下拉框的选项发生变化时，触发`changeCity()`函数，该函数会获取当前选中的城市，并将其打印到控制台中。
这样，通过JavaScript的级联效果，我们可以实现多个下拉框之间的联动，根据前一个下拉框的选项来动态改变后一个下拉框的选项。这在一些需要根据用户选择来展示相关信息的场景中非常有用。
