本文介绍了如何使用HTML和JavaScript实现三级联动下拉框功能，通过省份、城市和区县的数据绑定，实现用户在选择不同层级时自动筛选选项，提高用户体验。
摘要由CSDN通过智能技术生成
三级联动是指页面上有三个下拉框，第一个下拉框选定某个选项后，第二个下拉框会根据第一个下拉框的选项进行筛选，第三个下拉框会根据第二个下拉框的选项进行筛选。这种交互方式可以帮助用户快速定位到需要的选项。
下面是一个简单的三级联动的代码实例：
<!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，分别存储了省份、城市和区县的数据。然后通过事件监听器，实现了省份、城市和区县三个下拉框的联动效果。当选择省份后，城市下拉框会根据省份的选择进行筛选，选择城市后，区县下拉框会根据城市的选择进行筛选。这样用户就可以方便快速地选择到需要的选项。
