如何使用 AJAX 实现省市区三级联动？

省市区三级联动

本例实现使用 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 请求获取对应区县的列表，并填充到区县选择器中。

补充说明

• sjld.php 是一个 php 脚本，用于获取省市区数据，具体实现需要根据实际数据库结构调整。
• 在实际开发中，还会涉及其他 ui 交互和错误处理逻辑，这里仅提供基本的三级联动功能。

以上就是如何使用 AJAX 实现省市区三级联动？的详细内容，更多请关注GTHOST其它相关文章！