ajax json二级联动

什么是ajax json二级联动？

二级联动是指在网页上显示的两个或多个下拉菜单之间具有依赖关系，即第二个下拉菜单的选项内容被第一个下拉菜单的当前选项所决定。ajax json二级联动即通过ajax技术实现二级联动，并且数据格式使用json格式。

如何实现ajax json二级联动？

首先，在网页上创建需要进行二级联动的下拉菜单，并为其设置id。

<select id="first">
  <option>选择1</option>
  <option>选择2</option>
  <option>选择3</option>
</select>

<select id="second"></select>

然后，在javascript中通过ajax获取json格式的数据并解析：

var first = document.getElementById("first");
var second = document.getElementById("second");

var xhr = new XMLHttpRequest();
xhr.open("GET","data.json",true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    //...
  }
}
xhr.send();

接着，在第一个下拉菜单的change事件中获取当前选项的值，并根据该值从json数据中获取对应的数据：

first.onchange = function() {
  var val = first.value;
  var options = data[val];
  //...
}

最后将获取到的数据添加到第二个下拉菜单中：

while (second.firstChild) {
  second.removeChild(second.firstChild);
}
for (var i = 0; i < options.length; i++) {
  var option = document.createElement("option");
  option.innerHTML = options[i];
  second.appendChild(option);
}

总结

ajax json二级联动可以实现在网页上进行数据选择时的方便，通过ajax获取json格式的数据实现二级联动，可以更好地控制页面的数据交互。