ajax 省市二级联动
时间: 2023-11-15 13:57:22 浏览: 37
ajax 省市二级联动是一种常见的前端技术,它可以实现在选择省份后,自动加载该省份下的城市列表,从而实现省市二级联动的效果。下面是一个简单的实现步骤:
1. 在 HTML 页面中,定义两个下拉框,一个用于选择省份,一个用于选择城市。
2. 在 JavaScript 中,使用 Ajax 技术向服务器请求省份列表,并将其填充到省份下拉框中。
3. 当用户选择省份时,使用 Ajax 技术向服务器请求该省份下的城市列表,并将其填充到城市下拉框中。
下面是一个简单的代码示例:
HTML 代码:
```
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
```
JavaScript 代码:
```
// 请求省份列表
$.ajax({
url: '/api/provinces',
success: function(data) {
// 将省份列表填充到省份下拉框中
var $province = $('#province');
$.each(data, function(index, province) {
$province.append('<option value="' + province.id + '">' + province.name + '</option>');
});
}
});
// 当用户选择省份时,请求该省份下的城市列表
$('#province').on('change', function() {
var provinceId = $(this).val();
if (provinceId) {
$.ajax({
url: '/api/cities?provinceId=' + provinceId,
success: function(data) {
// 将城市列表填充到城市下拉框中
var $city = $('#city');
$city.empty().append('<option value="">请选择城市</option>');
$.each(data, function(index, city) {
$city.append('<option value="' + city.id + '">' + city.name + '</option>');
});
}
});
} else {
// 如果用户选择了“请选择省份”,则清空城市下拉框
$('#city').empty().append('<option value="">请选择城市</option>');
}
});
```