基于ajax的级联下拉菜单，给出代码

下面是一个基于 AJAX 的级联下拉菜单的示例代码：

HTML：

<select id="category1" name="category1" onchange="getCategory2()">
  <option value="">请选择分类</option>
  <option value="1">电子产品</option>
  <option value="2">家用电器</option>
</select>

<select id="category2" name="category2">
  <option value="">请选择子分类</option>
</select>

JavaScript：

function getCategory2() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("category2").innerHTML = xmlhttp.responseText;
    }
  };
  var category1 = document.getElementById("category1").value;
  xmlhttp.open("GET", "getCategory2.php?category1=" + category1, true);
  xmlhttp.send();
}

PHP（getCategory2.php）：

<?php
$category1 = $_GET['category1'];

// 连接数据库，执行查询操作，得到子分类列表
// ...

// 输出子分类选项
echo "<option value=''>请选择子分类</option>";
while ($row = mysqli_fetch_assoc($result)) {
  echo "<option value='" . $row['id'] . "'>" . $row['name'] . "</option>";
}
?>

在这个示例中，当第一个下拉菜单的选项被改变时，JavaScript 函数 `getCategory2()` 被调用。该函数创建一个 XMLHttpRequest 对象，使用 GET 方法向 `getCategory2.php` 发送一个带有 `category1` 参数的请求。服务器端的 PHP 文件根据 `category1` 参数执行查询操作，得到相应的子分类列表，并输出到客户端。最后，JavaScript 函数将子分类选项插入到第二个下拉菜单中。