级联选项 ajax—示例代码

级联选项是一种常见的网页交互技术，它可以实现一个选项的选择会影响下一个选项的内容。这种交互通常使用Ajax来实现，通过向服务器发送异步请求获取下一个选项的数据，并将数据动态更新到页面上。

示例代码如下所示：

// HTML部分
<select id="firstSelect" onchange="getSecondOptions()">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<select id="secondSelect">
  <option value="">请选择</option>
</select>
// JavaScript部分
function getSecondOptions() {
  var firstSelect = document.getElementById("firstSelect");
  var secondSelect = document.getElementById("secondSelect");
  // 清空第二个选项的内容
  secondSelect.innerHTML = "<option value=''>请选择</option>";
  // 获取第一个选项的值
  var selectedValue = firstSelect.value;
  // 发送Ajax请求，获取第二个选项的数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var options = JSON.parse(xhr.responseText);
      // 动态更新第二个选项的内容
      options.forEach(function(option) {
        var optionElement = document.createElement("option");
        optionElement.value = option.value;
        optionElement.textContent = option.text;
        secondSelect.appendChild(optionElement);
      });
    }
  };
  xhr.open("GET", "/getOptions?selectedValue=" + selectedValue, true);
  xhr.send();
}

上述示例代码中，首先在页面上定义了两个`<select>`元素，分别是第一个选项和第二个选项。当第一个选项的值发生变化时，会触发`getSecondOptions()`函数。

在`getSecondOptions()`函数中，首先获取第一个选项和第二个选项的元素。然后清空第二个选项的内容，以便动态更新。接着获取第一个选项的值。

然后，通过`XMLHttpRequest`对象发送Ajax请求，向服务器请求获取第二个选项的数据。在请求成功后，通过解析服务器返回的JSON数据，动态创建`<option>`元素，并将其添加到第二个选项中。

通过`open()`方法设置请求的URL和参数，并通过`send()`方法发送请求。

通过该示例代码，当第一个选项的值发生变化时，会向服务器发送Ajax请求，并将返回的数据动态更新到第二个选项中，实现级联选项的效果。