省市区三级联动
本例实现使用 ajax 获取省份、城市、区县列表，并通过级联方式实现三级联动效果。
html 代码（省份选择器）
<select name="prov"></select>
javascript 代码
// 获取页面元素
const selectProv = document.querySelector('select[name="prov"]');
// 创建 AJAX 对象
const xhr = new XMLHttpRequest();
// 打开请求
xhr.open('GET', './sjld.php?fid=1');
// 设置响应类型为 JSON
xhr.responseType = 'json';
// 发送请求
xhr.send();
// 监听响应
xhr.onload = () => {
if (xhr.status === 200) {
// 获取省份数据
const provinces = xhr.response;
// 遍历省份数据
provinces.forEach((province) => {
// 创建选项元素
const provinceOption = document.createElement('option');
// 设置选项内容和值
provinceOption.textContent = province.name;
provinceOption.value = province.id;
// 添加选项到选择器中
selectProv.appendChild(provinceOption);
});
}
};级联效果
用户选择省份后，将会触发 ajax 请求获取对应市的列表，并填充到城市选择器中；同理，选择市后也会触发 ajax 请求获取对应区县的列表，并填充到区县选择器中。
补充说明
以上就是如何使用 AJAX 实现省市区三级联动？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
572
收藏
