省市区三级联动
本例实现使用 ajax 获取省份、城市、区县列表，并通过级联方式实现三级联动效果。
html 代码（省份选择器）
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 请求获取对应区县的列表，并填充到区县选择器中。
补充说明
- sjld.php 是一个 php 脚本，用于获取省市区数据，具体实现需要根据实际数据库结构调整。
- 在实际开发中，还会涉及其他 ui 交互和错误处理逻辑，这里仅提供基本的三级联动功能。
