三级联动是指页面上有三个下拉框，第一个下拉框选定某个选项后，第二个下拉框会根据第一个下拉框的选项进行筛选，第三个下拉框会根据第二个下拉框的选项进行筛选。这种交互方式可以帮助用户快速定位到需要的选项。
下面是一个简单的三级联动的代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动</title>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
<option value="1">广东省</option>
<option value="2">浙江省</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
<script>
const cityData = {
1: ["广州市", "深圳市", "珠海市"],
2: ["杭州市", "宁波市", "温州市"]
};
const districtData = {
"广州市": ["天河区", "越秀区", "海珠区"],
"深圳市": ["福田区", "罗湖区", "南山区"],
"杭州市": ["西湖区", "拱墅区", "滨江区"],
"宁波市": ["海曙区", "江东区", "江北区"]
};
const province = document.getElementById("province");
const city = document.getElementById("city");
const district = document.getElementById("district");
province.addEventListener("change", function() {
city.innerHTML = "<option value=''>请选择城市</option>";
district.innerHTML = "<option value=''>请选择区县</option>";
const selectedProvince = province.value;
const cities = cityData[selectedProvince];
cities.forEach(function(item) {
const option = document.createElement("option");
option.value = item;
option.textContent = item;
city.appendChild(option);
});
});
city.addEventListener("change", function() {
district.innerHTML = "<option value=''>请选择区县</option>";
const selectedCity = city.value;
const districts = districtData[selectedCity];
districts.forEach(function(item) {
const option = document.createElement("option");
option.value = item;
option.textContent = item;
district.appendChild(option);
});
});
</script>
</body>
</html>
在这个代码实例中，我们定义了两个对象cityData和districtData，分别存储了省份、城市和区县的数据。然后通过事件监听器，实现了省份、城市和区县三个下拉框的联动效果。当选择省份后，城市下拉框会根据省份的选择进行筛选，选择城市后，区县下拉框会根据城市的选择进行筛选。这样用户就可以方便快速地选择到需要的选项。
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/138229412