Ajax实现无刷新三联动下拉框

2023年6月10日下午5:59 • JavaScript

介绍

本攻略将会详细介绍如何通过 Ajax 技术实现无刷新三联动下拉框。所谓三联动下拉框指的是三个下拉框之间存在父子关系，当父级下拉框的选项改变时，子级下拉框的选项会进行更新。

实现步骤

HTML 部分

首先，在 HTML 部分构建三个 select 标签，分别表示省市区县。

<select id="province">
  <option value="">请选择省份</option>
</select>

<select id="city">
  <option value="">请选择城市</option>
</select>

<select id="area">
  <option value="">请选择地区</option>
</select>

JavaScript 部分

在实现无刷新三联动下拉框之前，我们需要先获取省市区县的数据。可以利用 Ajax 进行异步数据的请求，这里就不再赘述。此处声明，省市区县数据已经以 JSON 格式获取到了，并存储在 data 变量中。

接下来，定义一个函数 init() 用于初始化省市区县下拉框的选项，代码如下：

function init() {
  var provinceEl = document.getElementById('province');
  var cityEl = document.getElementById('city');
  var areaEl = document.getElementById('area');

  // 初始化省级下拉框
  for (var i = 0; i < data.length; i++) {
    var option = document.createElement('option');
    option.value = data[i].name;
    option.innerHTML = data[i].name;
    provinceEl.appendChild(option);
  }

  // 绑定省级下拉框的 onchange 事件
  provinceEl.onchange = function() {
    // 清空市级和区县级下拉框的选项
    cityEl.innerHTML = '<option value="">请选择城市</option>';
    areaEl.innerHTML = '<option value="">请选择地区</option>';

    // 获取选中的省份
    var province = provinceEl.value;
    if (!province) {
      return;
    }

    // 查找对应省份的城市
    var cities = [];
    for (var i = 0; i < data.length; i++) {
      if (data[i].name === province) {
        cities = data[i].cities;
        break;
      }
    }

    // 动态添加城市选项
    for (var i = 0; i < cities.length; i++) {
      var option = document.createElement('option');
      option.value = cities[i].name;
      option.innerHTML = cities[i].name;
      cityEl.appendChild(option);
    }
  };

  // 绑定城市下拉框的 onchange 事件
  cityEl.onchange = function() {
    // 清空区县级下拉框的选项
    areaEl.innerHTML = '<option value="">请选择地区</option>';

    // 获取选中的城市
    var city = cityEl.value;
    if (!city) {
      return;
    }

    // 查找对应城市的区县
    var areas = [];
    for (var i = 0; i < data.length; i++) {
      var cities = data[i].cities;
      for (var j = 0; j < cities.length; j++) {
        if (cities[j].name === city) {
          areas = cities[j].areas;
          break;
        }
      }
    }

    // 动态添加区县选项
    for (var i = 0; i < areas.length; i++) {
      var option = document.createElement('option');
      option.value = areas[i];
      option.innerHTML = areas[i];
      areaEl.appendChild(option);
    }
  };
}

// 页面加载完成后执行
window.onload = function() {
  init();
};

代码说明：

首先，通过 document.getElementById() 获取到省市区县的 select 元素。
接着，初始化省级下拉框的选项，在 select 元素中添加对应的 option 元素。
然后，为省级下拉框绑定 onchange 事件。当省级下拉框中的选项发生改变时，清空市级和区县级下拉框的选项，并根据选中的省份动态添加对应的城市选项。
后面的城市和区县的逻辑与省份的类似。
示例说明

我们可以利用 jQuery 中的 $.ajax() 方法来进行异步请求，将获取到的数据传入 init() 中。下面是 Ajax 获取省市区县数据的示例代码：

$.ajax({
  type: 'GET',
  url: '/getRegionData',
  dataType: 'json',
  success: function(res) {
    data = res.data;
    init();
  },
  error: function(err) {
    console.error(err);
  }
});

或者，从服务器端返回 JSON 格式的省市区县数据：

data = [
  {
    "name": "浙江省",
    "cities": [
      {
        "name": "杭州市",
        "areas": ["西湖区", "下城区", "江干区", "拱墅区", "上城区", "滨江区", "余杭区", "萧山区"]
      },
      ...
    ]
  },
  ...
];
init();

经过上述步骤，即可实现无刷新三联动下拉框功能。

总结

本攻略主要介绍了如何利用 Ajax 实现无刷新三联动下拉框，并给出了一些示例说明。最后，需要注意以下几点：