以下是一个简单的 HTML 和 JavaScript 实现级联查询的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>级联查询</title>
<meta charset="utf-8">
<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">
<option value="">请选择</option>
<option value="1">浙江省</option>
<option value="2">江苏省</option>
<option value="3">福建省</option>
</select>
<label for="city">城市：</label>
<select id="city">
<option value="">请选择</option>
</select>
<label for="district">区县：</label>
<select id="district">
<option value="">请选择</option>
</select>
<script>
// 省份数据
var provinceData = [
{
id: 1,
name: '浙江省',
city: [
{
id: 11,
name: '杭州市',
district: [
{
id: 111,
name: '西湖区'
},
{
id: 112,
name: '拱墅区'
},
{
id: 113,
name: '江干区'
}
]
},
{
id: 12,
name: '温州市',
district: [
{
id: 121,
name: '鹿城区'
},
{
id: 122,
name: '龙湾区'
},
{
id: 123,
name: '瓯海区'
}
]
}
]
},
{
id: 2,
name: '江苏省',
city: [
{
id: 21,
name: '南京市',
district: [
{
id: 211,
name: '玄武区'
},
{
id: 212,
name: '秦淮区'
},
{
id: 213,
name: '白下区'
}
]
},
{
id: 22,
name: '苏州市',
district: [
{
id: 221,
name: '虎丘区'
},
{
id: 222,
name: '吴中区'
},
{
id: 223,
name: '相城区'
}
]
}
]
},
{
id: 3,
name: '福建省',
city: [
{
id: 31,
name: '福州市',
district: [
{
id: 311,
name: '鼓楼区'
},
{
id: 312,
name: '台江区'
},
{
id: 313,
name: '仓山区'
}
]
},
{
id: 32,
name: '厦门市',
district: [
{
id: 321,
name: '思明区'
},
{
id: 322,
name: '海沧区'
},
{
id: 323,
name: '湖里区'
}
]
}
]
}
];
// 加载省份数据
var provinceSelect = $('#province');
$.each(provinceData, function(index, item) {
provinceSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
});
// 省份改变事件
provinceSelect.change(function() {
var provinceId = $(this).val();
var citySelect = $('#city');
var districtSelect = $('#district');
citySelect.empty().append('<option value="">请选择</option>');
districtSelect.empty().append('<option value="">请选择</option>');
if (provinceId) {
// 加载城市数据
var cities = $.grep(provinceData, function(item) {
return item.id == provinceId;
})[0].city;
$.each(cities, function(index, item) {
citySelect.append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
// 城市改变事件
$('#city').change(function() {
var cityId = $(this).val();
var districtSelect = $('#district');
districtSelect.empty().append('<option value="">请选择</option>');
if (cityId) {
// 加载区县数据
var districts = $.grep(provinceData, function(province) {
return $.grep(province.city, function(city) {
return city.id == cityId;
}).length > 0;
})[0].city.filter(function(city) {
return city.id == cityId;
})[0].district;
$.each(districts, function(index, item) {
districtSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
</script>
</body>
</html>
```
注：以上示例中使用了 jQuery 库，需要引入 jQuery 库才能正常运行该代码。
1500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
