利用jquery和ajax实现<!--页面刚加载就开始发送ajax请求获取省信息展示--> <select id="provice"> <option>请选择省</option> </select> <!--省发生onchange事件的时候获取对应的市信息展示--> <select id="city"> <option>请选择市</option> </select>
时间: 2023-08-17 20:25:19 浏览: 127
可以参考以下代码实现:
```javascript
$(document).ready(function(){
$.ajax({
url: "getProvince.php", // 发送请求的URL
dataType: "json", // 返回的数据类型
success: function(data){ // 请求成功时的回调函数
if(data.code === 200){ // 判断返回的状态码是否为200
var provinces = data.data; // 获取省份信息
var $provinceSelect = $("#province"); // 获取省份下拉框
$.each(provinces, function(index, province){ // 遍历省份信息
var $option = $("<option>").text(province.name).val(province.id); // 创建省份选项
$provinceSelect.append($option); // 添加省份选项到下拉框
});
}
}
});
$("#province").on("change", function(){
var provinceId = $(this).val(); // 获取选中省份的ID
$.ajax({
url: "getCity.php", // 发送请求的URL
data: {provinceId: provinceId}, // 发送请求的参数
dataType: "json", // 返回的数据类型
success: function(data){ // 请求成功时的回调函数
if(data.code === 200){ // 判断返回的状态码是否为200
var cities = data.data; // 获取城市信息
var $citySelect = $("#city"); // 获取城市下拉框
$citySelect.empty(); // 清空城市下拉框
$citySelect.append($("<option>").text("请选择市")); // 添加默认选项到城市下拉框
$.each(cities, function(index, city){ // 遍历城市信息
var $option = $("<option>").text(city.name).val(city.id); // 创建城市选项
$citySelect.append($option); // 添加城市选项到下拉框
});
}
}
});
});
});
```
其中,`getProvince.php` 和 `getCity.php` 分别是后端程序,用于获取省份和城市信息的数据。在这里,我们使用了 jQuery 的 `$.ajax()` 方法来发送异步请求,并在请求成功后更新页面的省份和城市下拉框。在省份下拉框的 `change` 事件中,我们根据选中的省份ID,发送请求获取对应的城市信息,并更新城市下拉框。
阅读全文