基于AJAX的级联下拉菜单 不使用api

AJAX（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用程序的技术。它允许您在不重新加载整个页面的情况下更新部分页面内容。级联下拉菜单是一种常见的用户界面模式，其中一个下拉菜单的选择会影响到另一个下拉菜单的选项。以下是一个基于 AJAX 的级联下拉菜单的示例，它不使用任何 API：

HTML 代码：

<label for="category">Category:</label>
<select id="category" name="category" onchange="getSubcategories()">
  <option value="">Select a category</option>
  <option value="1">Category 1</option>
  <option value="2">Category 2</option>
  <option value="3">Category 3</option>
</select>

<label for="subcategory">Subcategory:</label>
<select id="subcategory" name="subcategory">
  <option value="">Select a subcategory</option>
</select>

JavaScript 代码：

function getSubcategories() {
  var category = document.getElementById("category").value;
  var subcategory = document.getElementById("subcategory");

  // Clear subcategory options
  subcategory.innerHTML = "";

  // If no category is selected, do nothing
  if (category == "") {
    return;
  }

  // Make AJAX request to server to get subcategories for selected category
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var subcategories = JSON.parse(this.responseText);

      // Add subcategory options to select element
      for (var i = 0; i < subcategories.length; i++) {
        var option = document.createElement("option");
        option.value = subcategories[i].id;
        option.text = subcategories[i].name;
        subcategory.appendChild(option);
      }
    }
  };
  xhr.open("GET", "getSubcategories.php?category=" + category, true);
  xhr.send();
}

在上面的代码中，当用户选择一个类别时，`getSubcategories()` 函数被调用。该函数获取所选类别的值，清空子类别下拉菜单的选项，并通过 AJAX 请求从服务器获取所选类别的子类别。服务器返回的子类别数据是一个 JSON 对象，包含子类别的 ID 和名称。然后，使用 JavaScript 动态地创建子类别下拉菜单选项，并将其添加到 `subcategory` 元素中。该代码需要服务器端脚本 `getSubcategories.php` 来处理 AJAX 请求并返回子类别数据。