html省市区三级联动jq
时间: 2023-10-02 08:09:25 浏览: 112
您好!要实现HTML省市区三级联动的功能,可以借助jQuery来实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>省市区三级联动</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="area">
<option value="">请选择地区</option>
</select>
<script>
$(function() {
// 获取省份数据并填充下拉框
$.getJSON('province.json', function(data) {
var options = '<option value="">请选择省份</option>';
$.each(data, function(index, province) {
options += '<option value="' + province.code + '">' + province.name + '</option>';
});
$('#province').html(options);
});
// 省份下拉框改变事件
$('#province').change(function() {
var provinceCode = $(this).val();
if (provinceCode === '') {
$('#city').html('<option value="">请选择城市</option>');
$('#area').html('<option value="">请选择地区</option>');
return;
}
// 获取城市数据并填充下拉框
$.getJSON('city.json', { provinceCode: provinceCode }, function(data) {
var options = '<option value="">请选择城市</option>';
$.each(data, function(index, city) {
options += '<option value="' + city.code + '">' + city.name + '</option>';
});
$('#city').html(options);
$('#area').html('<option value="">请选择地区</option>');
});
});
// 城市下拉框改变事件
$('#city').change(function() {
var cityCode = $(this).val();
if (cityCode === '') {
$('#area').html('<option value="">请选择地区</option>');
return;
}
// 获取地区数据并填充下拉框
$.getJSON('area.json', { cityCode: cityCode }, function(data) {
var options = '<option value="">请选择地区</option>';
$.each(data, function(index, area) {
options += '<option value="' + area.code + '">' + area.name + '</option>';
});
$('#area').html(options);
});
});
});
</script>
</body>
</html>
```
在示例代码中,使用了三个`<select>`标签来分别表示省、市和区的下拉框。通过jQuery的`$.getJSON`方法来异步获取省、市、区的数据(以JSON格式存储),并根据选择的省、市来动态更新下一级的选项。
注:需要替换示例中的`province.json`、`city.json`、`area.json`为实际的省、市、区数据文件路径或后端接口地址。
希望对您有所帮助!如有其他问题,请随时提问。
阅读全文