s省市县三级联动html
时间: 2023-11-21 08:58:38 浏览: 55
以下是一个简单的HTML实现省市县三级联动的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市县三级联动</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
<script>
$(function(){
// 加载省份数据
$.getJSON('province.json', function(data){
$.each(data, function(index, item){
$('#province').append('<option value="'+item.code+'">'+item.name+'</option>');
});
});
// 省份改变时加载城市数据
$('#province').change(function(){
var code = $(this).val();
$('#city').empty().append('<option value="">请选择城市</option>');
$('#district').empty().append('<option value="">请选择区县</option>');
if(code != ''){
$.getJSON('city.json', {province:code}, function(data){
$.each(data, function(index, item){
$('#city').append('<option value="'+item.code+'">'+item.name+'</option>');
});
});
}
});
// 城市改变时加载区县数据
$('#city').change(function(){
var code = $(this).val();
$('#district').empty().append('<option value="">请选择区县</option>');
if(code != ''){
$.getJSON('district.json', {city:code}, function(data){
$.each(data, function(index, item){
$('#district').append('<option value="'+item.code+'">'+item.name+'</option>');
});
});
}
});
});
</script>
</body>
</html>
```
该示例使用了jQuery库,通过Ajax异步加载省市县数据,实现了三级联动效果。其中,省份数据存储在province.json文件中,城市数据和区县数据分别存储在city.json和district.json文件中。在选择省份时,会根据省份代码异步加载对应的城市数据,在选择城市时,会根据城市代码异步加载对应的区县数据。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)