HTML5 多级选择
HTML5 提供了一种方便的方式来实现多级选择，使用户可以从一个级联的列表中选择所需的选项。这在许多应用程序中都是非常有用的，比如选择省市区、选择产品类别等。本文将介绍如何使用 HTML5 来实现多级选择，并附带代码示例。
1. HTML 结构
首先，我们需要创建 HTML 结构来实现多级选择。我们可以使用 <select> 和 <option> 元素来创建级联的选择列表。以下是一个示例代码：
<select id="province">
<option value="">请选择省份</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangdong">广东</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
在上面的代码中，我们创建了三个 <select> 元素，分别用于选择省份、城市和区县。每个 <select> 元素都包含一个默认的选项，以及其他可选的选项。
2. JavaScript 事件
接下来，我们需要使用 JavaScript 来处理选择列表的变化，并更新下一级列表的选项。我们可以使用 onchange 事件来监听选择列表的变化，并根据选择的值来更新下一级列表的选项。以下是一个示例代码：
document.getElementById("province").onchange = function() {
var province = this.value;
var cityElement = document.getElementById("city");
var districtElement = document.getElementById("district");
// 清空城市和区县选项
cityElement.innerHTML = "<option value=''>请选择城市</option>";
districtElement.innerHTML = "<option value=''>请选择区县</option>";
if (province === "beijing") {
// 如果选择了北京，添加北京的城市选项
cityElement.innerHTML += "<option value='haidian'>海淀区</option>";
cityElement.innerHTML += "<option value='chaoyang'>朝阳区</option>";
} else if (province === "shanghai") {
// 如果选择了上海，添加上海的城市选项
cityElement.innerHTML += "<option value='pudong'>浦东新区</option>";
cityElement.innerHTML += "<option value='xuhui'>徐汇区</option>";
} else if (province === "guangdong") {
// 如果选择了广东，添加广东的城市选项
cityElement.innerHTML += "<option value='guangzhou'>广州市</option>";
cityElement.innerHTML += "<option value='shenzhen'>深圳市</option>";
}
};
在上面的代码中，我们通过 getElementById 方法获取了省份、城市和区县的选择列表元素，并添加了 onchange 事件处理程序。在事件处理程序中，我们首先获取选择的省份，然后根据选择的值来更新城市和区县的选项。
3. 完整示例
以下是一个完整的示例代码，演示了如何使用 HTML 和 JavaScript 实现多级选择：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多级选择</title>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangdong">广东</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
<script>
document.getElementById("province").onchange = function() {
var province = this.value;
var cityElement = document.getElementById("city");
var districtElement = document.getElementById("district");
// 清空城市和区县选项
cityElement.innerHTML = "<option value=''>请选择城市</option>";
districtElement.innerHTML = "<option value=''>请选择区县</option>";
if (province === "beijing") {
// 如果选择了北京，添加北京的城市选项
cityElement.innerHTML += "<option value='haidian'>海淀区</option>";
cityElement.innerHTML += "<option value='chaoyang'>朝阳区</option>";
} else if (province === "sh
