前端如何实现省市区查询代码
时间: 2024-06-11 17:04:04 浏览: 26
前端实现省市区查询需要借助第三方库或API,以下是一些常见的实现方式:
1. 使用第三方库:如element-ui、iview等UI库中均有提供省市区联动选择器组件,只需按照文档使用即可。
2. 使用API:如阿里云提供的API,通过调用API获取省市区数据,再使用下拉框或级联选择器等组件展示。
3. 使用本地JSON数据:事先准备好省市区的JSON数据,通过ajax请求加载数据,再使用下拉框或级联选择器等组件展示。可以在GitHub上找到相关的数据源。
以下是使用本地JSON数据实现省市区查询的示例代码:
HTML部分:
```
<select id="province"></select>
<select id="city"></select>
<select id="district"></select>
```
JS部分:
```
// 加载省份数据
$.getJSON('province.json', function(data) {
var options = '<option value="">请选择省份</option>';
$.each(data, function(index, item) {
options += '<option value="' + item.code + '">' + item.name + '</option>';
});
$('#province').html(options);
});
// 省份选择后加载城市数据
$('#province').change(function() {
var provinceCode = $(this).val();
if (provinceCode) {
$.getJSON('city.json', {province: provinceCode}, function(data) {
var options = '<option value="">请选择城市</option>';
$.each(data, function(index, item) {
options += '<option value="' + item.code + '">' + item.name + '</option>';
});
$('#city').html(options);
});
} else {
$('#city').html('<option value="">请选择城市</option>');
$('#district').html('<option value="">请选择区县</option>');
}
});
// 城市选择后加载区县数据
$('#city').change(function() {
var cityCode = $(this).val();
if (cityCode) {
$.getJSON('district.json', {city: cityCode}, function(data) {
var options = '<option value="">请选择区县</option>';
$.each(data, function(index, item) {
options += '<option value="' + item.code + '">' + item.name + '</option>';
});
$('#district').html(options);
});
} else {
$('#district').html('<option value="">请选择区县</option>');
}
});
```