如何将AJAX用于依赖下拉列表？

// HTML代码
<select id="firstList">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select id="secondList">
  <!-- 这里的选项将由AJAX动态生成 -->
</select>

// JavaScript代码
// 监听第一个下拉列表的选择事件
document.getElementById('firstList').addEventListener('change', function() {
  var selectedValue = this.value; // 获取当前选择的选项值

  // 发送AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/getOptions?selected=' + selectedValue, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var options = JSON.parse(xhr.responseText); // 解析响应数据

      // 动态更新第二个下拉列表的选项
      var secondList = document.getElementById('secondList');
      secondList.innerHTML = ''; // 清空原有选项
      options.forEach(function(option) {
        var optionElement = document.createElement('option');
        optionElement.value = option.value;
        optionElement.textContent = option.text;
        secondList.appendChild(optionElement);
      });
    }
  };
  xhr.send();
});