// 获取省份列表
function getProvinceList() {
return new Promise((resolve, reject) => {
axios.get('http://example.com/api/provinces')
.then((response) => {
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
}
// 获取城市列表
function getCityList(provinceId) {
return new Promise((resolve, reject) => {
axios.get(`http://example.com/api/cities?provinceId=${provinceId}`)
.then((response) => {
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
}
// 获取区县列表
function getCountyList(cityId) {
return new Promise((resolve, reject) => {
axios.get(`http://example.com/api/counties?cityId=${cityId}`)
.then((response) => {
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
}
// 加载省份列表
getProvinceList()
.then((provinceList) => {
// 将省份列表添加到 select 元素中
const selectProvince = document.getElementById('province');
provinceList.forEach((province) => {
const option = document.createElement('option');
option.value = province.id;
option.text = province.name;
selectProvince.appendChild(option);
});
})
.catch((error) => {
console.error(error);
});
// 当省份 select 元素的值改变时,重新加载城市列表
document.getElementById('province').addEventListener('change', (event) => {
const provinceId = event.target.value;
// 加载城市列表
getCityList(provinceId)
.then((cityList) => {
// 将城市列表添加到 select 元素中
const selectCity = document.getElementById('city');
selectCity.innerHTML = ''; // 清空城市 select 元素的选项
cityList.forEach((city) => {
const option = document.createElement('option');
option.value = city.id;
option.text = city.name;
selectCity.appendChild(option);
});
})
.catch((error) => {
console.error(error);
});
});
// 当城市 select 元素的值改变时,重新加载区县列表
document.getElementById('city').addEventListener('change', (event) => {
const cityId = event.target.value;
// 加载区县列表
getCountyList(cityId)
.then((countyList) => {
// 将区县列表添加到 select 元素中
const selectCounty = document.getElementById('county');
selectCounty.innerHTML = ''; // 清空区县 select 元素的选项
countyList.forEach((county) => {
const option = document.createElement('option');
option.value = county.id;
option.text = county.name;
selectCounty.appendChild(option);
});
})
.catch((error) => {
console.error(error);
});
});
省市县联动结合Promise使用
猜你喜欢
转载自blog.csdn.net/LoveHaixin/article/details/129754595
今日推荐
周排行