省市县三级联动html教学
时间: 2024-01-11 19:21:51 浏览: 42
省市县三级联动是一种常见的前端技术,用于实现用户在选择省份后,动态加载对应的城市和区县信息。下面是一个简单的HTML教学示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>省市县三级联动</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<label for="province">省份:</label>
<select id="province" onchange="loadCities()">
<option value="">请选择省份</option>
<!-- 这里可以通过后端接口获取省份数据并动态生成选项 -->
<option value="1">北京市</option>
<option value="2">上海市</option>
<option value="3">广东省</option>
<!-- 其他省份选项 -->
</select>
<label for="city">城市:</label>
<select id="city" onchange="loadCounties()">
<option value="">请选择城市</option>
</select>
<label for="county">区县:</label>
<select id="county">
<option value="">请选择区县</option>
</select>
<script>
function loadCities() {
var provinceId = document.getElementById("province").value;
// 这里可以通过后端接口根据省份ID获取对应的城市数据
var cities = [
{id: 1, name: "北京市"},
{id: 2, name: "上海市"},
{id: 3, name: "广州市"},
// 其他城市数据
];
var citySelect = document.getElementById("city");
citySelect.innerHTML = "<option value=''>请选择城市</option>";
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i].id;
option.text = cities[i].name;
citySelect.appendChild(option);
}
}
function loadCounties() {
var cityId = document.getElementById("city").value;
// 这里可以通过后端接口根据城市ID获取对应的区县数据
var counties = [
{id: 1, name: "东城区"},
{id: 2, name: "西城区"},
{id: 3, name: "海淀区"},
// 其他区县数据
];
var countySelect = document.getElementById("county");
countySelect.innerHTML = "<option value=''>请选择区县</option>";
for (var i = 0; i < counties.length; i++) {
var option = document.createElement("option");
option.value = counties[i].id;
option.text = counties[i].name;
countySelect.appendChild(option);
}
}
</script>
</body>
</html>
```
这个示例中,我们使用了HTML的`<select>`元素和JavaScript来实现省市县三级联动。当用户选择省份时,通过JavaScript函数`loadCities()`动态加载对应的城市选项;当用户选择城市时,通过JavaScript函数`loadCounties()`动态加载对应的区县选项。
注意:这个示例中的省份、城市和区县数据是静态的,实际应用中,你需要通过后端接口来获取真实的数据。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)