html三级联动下拉菜单

三级联动下拉菜单可以通过HTML、CSS和JavaScript来实现。以下是一个简单的示例代码：

HTML代码：

<select id="province">
  <option value="">请选择省份</option>
  <option value="北京市">北京市</option>
  <option value="上海市">上海市</option>
  <option value="广东省">广东省</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="district">
  <option value="">请选择区县</option>
</select>

JavaScript代码：

var cityList = {
  "北京市": ["北京市"],
  "上海市": ["上海市"],
  "广东省": ["广州市", "深圳市", "珠海市"]
};

var districtList = {
  "北京市": ["东城区", "西城区", "朝阳区", "海淀区"],
  "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区"],
  "广州市": ["天河区", "越秀区", "荔湾区", "海珠区"],
  "深圳市": ["福田区", "罗湖区", "南山区", "宝安区"],
  "珠海市": ["香洲区", "斗门区", "金湾区"]
};

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

province.onchange = function() {
  var selectedProvince = province.options[province.selectedIndex].value;
  city.innerHTML = "<option value=''>请选择城市</option>";
  district.innerHTML = "<option value=''>请选择区县</option>";
  if (selectedProvince !== "") {
    for (var i = 0; i < cityList[selectedProvince].length; i++) {
      var option = document.createElement("option");
      option.value = cityList[selectedProvince][i];
      option.innerHTML = cityList[selectedProvince][i];
      city.appendChild(option);
    }
  }
};

city.onchange = function() {
  var selectedCity = city.options[city.selectedIndex].value;
  district.innerHTML = "<option value=''>请选择区县</option>";
  if (selectedCity !== "") {
    for (var i = 0; i < districtList[selectedCity].length; i++) {
      var option = document.createElement("option");
      option.value = districtList[selectedCity][i];
      option.innerHTML = districtList[selectedCity][i];
      district.appendChild(option);
    }
  }
};

在这个示例中，我们先定义了一个包含城市和区县的列表。然后，我们在HTML中创建了三个下拉菜单，分别用于选择省份、城市和区县。当选择省份时，根据选择的省份动态生成城市列表。当选择城市时，根据选择的城市动态生成区县列表。这样，就实现了一个简单的三级联动下拉菜单。