html实现级联选择器

HTML中的级联选择器可以使用select和option标签来实现。下面是一个简单的例子：

<label>请选择省份：</label>
<select id="province" onchange="updateCities()">
  <option value="">请选择</option>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="广东">广东</option>
</select>

<label>请选择城市：</label>
<select id="city">
  <option value="">请选择</option>
</select>

其中第一个select标签用来选择省份，第二个select标签用来选择城市。初始时城市选项为空，只有在选择了省份后才会根据省份动态生成对应的城市选项。

接下来是JavaScript代码：

function updateCities() {
  var provinceSelect = document.getElementById("province");
  var citySelect = document.getElementById("city");
  var cities = getCities(provinceSelect.value); // 根据省份获取城市列表
  citySelect.innerHTML = ""; // 清空原来的城市选项
  for (var i = 0; i < cities.length; i++) {
    var option = document.createElement("option");
    option.value = cities[i];
    option.text = cities[i];
    citySelect.appendChild(option); // 添加新的城市选项
  }
}

function getCities(province) {
  // 根据省份返回对应的城市列表
  switch (province) {
    case "北京":
      return ["东城区", "西城区", "朝阳区", "海淀区", "丰台区"];
    case "上海":
      return ["黄浦区", "徐汇区", "长宁区", "普陀区", "闵行区"];
    case "广东":
      return ["广州市", "深圳市", "珠海市", "汕头市", "韶关市"];
    default:
      return [];
  }
}

getCities函数根据选择的省份返回对应的城市列表，updateCities函数用来更新城市选项。在updateCities函数中，首先获取当前选择的省份，然后根据选择的省份获取对应的城市列表，接着清空原来的城市选项，最后根据新的城市列表动态生成新的城市选项。

以上就是一个简单的HTML级联选择器的实现方法。