js下拉列表框三级联动

在JavaScript中实现下拉列表框的三级联动，可以通过以下步骤来完成：

1. HTML结构：首先，在HTML中创建三个下拉列表框，分别表示三个级别的选项。例如：

<select id="province">
  <option value="">请选择省份</option>
  <!--省份选项-->
</select>

<select id="city">
  <option value="">请选择城市</option>
  <!--城市选项-->
</select>

<select id="district">
  <option value="">请选择区县</option>
  <!--区县选项-->
</select>

2. 数据准备：准备好省份、城市和区县的数据，可以使用数组或者JSON对象来存储。例如：

var provinceData = [
  { name: "北京", cities: ["北京市"] },
  { name: "上海", cities: ["上海市"] },
  //其他省份及其城市数据
];

var cityData = [
  { name: "北京市", districts: ["东城区", "西城区", "朝阳区", "海淀区"] },
  { name: "上海市", districts: ["黄浦区", "徐汇区", "静安区", "杨浦区"] },
  //其他城市及其区县数据
];

var districtData = [
  { name: "东城区" },
  { name: "西城区" },
  { name: "朝阳区" },
  { name: "海淀区" },
  //其他区县数据
];

3. 动态加载选项：使用JavaScript动态加载选项，根据用户选择的省份和城市来更新城市和区县的选项。例如：

var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("district");

// 省份选项改变时触发事件
provinceSelect.addEventListener("change", function() {
  var selectedProvince = provinceSelect.value;
  updateCityOptions(selectedProvince);
});

// 城市选项改变时触发事件
citySelect.addEventListener("change", function() {
  var selectedCity = citySelect.value;
  updateDistrictOptions(selectedCity);
});

// 更新城市选项
function updateCityOptions(selectedProvince) {
  // 清空城市选项
  citySelect.innerHTML = "<option value=''>请选择城市</option>";
  
  // 查找对应省份的城市数据
  var cities = cityData.find(function(item) {
    return item.name === selectedProvince;
  }).cities;
  
  // 动态添加城市选项
  cities.forEach(function(city) {
    var option = document.createElement("option");
    option.value = city;
    option.textContent = city;
    citySelect.appendChild(option);
  });
  
  // 更新区县选项
  updateDistrictOptions("");
}

// 更新区县选项
function updateDistrictOptions(selectedCity) {
  // 清空区县选项
  districtSelect.innerHTML = "<option value=''>请选择区县</option>";
  
  // 查找对应城市的区县数据
  var districts = districtData.find(function(item) {
    return item.name === selectedCity;
  }).districts;
  
  // 动态添加区县选项
  districts.forEach(function(district) {
    var option = document.createElement("option");
    option.value = district;
    option.textContent = district;
    districtSelect.appendChild(option);
  });
}

// 初始化省份选项
provinceData.forEach(function(province) {
  var option = document.createElement("option");
  option.value = province.name;
  option.textContent = province.name;
  provinceSelect.appendChild(option);
});

这样，当用户选择省份时，城市选项会根据选择的省份进行更新；当用户选择城市时，区县选项会根据选择的城市进行更新。