省市区三级联动
本例实现使用 ajax 获取省份、城市、区县列表，并通过级联方式实现三级联动效果。
html 代码（省份选择器）
javascript 代码
// 获取页面元素const selectProv = document.querySelector('select[name="prov"]');// 创建 AJAX 对象const xhr = new XMLHttpRequest();// 打开请求xhr.open('GET', './sjld.php?fid=1');// 设置响应类型为 JSONxhr.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 交互和错误处理逻辑，这里仅提供基本的三级联动功能。
以上就是如何使用 AJAX 实现省市区三级联动？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1495499.html
微信扫一扫 
支付宝扫一扫 
