下面是一个简单的AJAX级联下拉框实现案例，使用HTML、JavaScript（使用jQuery简化AJAX调用）和PHP后端进行演示。这个案例将展示如何根据第一个下拉框的选择来动态更新第二个下拉框的选项。
### HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX级联下拉框示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<label for="category">选择分类:</label>
<select id="category" onchange="loadSubcategories(this.value)">
<option value="">请选择...</option>
<option value="1">分类1</option>
<option value="2">分类2</option>
<!-- 假设有更多分类 -->
</select>
<label for="subcategory">选择子分类:</label>
<select id="subcategory">
<option value="">请选择...</option>
<!-- 子分类将通过AJAX加载 -->
</select>
<script>
function loadSubcategories(categoryId) {
$.ajax({
url: 'load_subcategories.php', // PHP文件路径，用于处理请求
type: 'GET',
data: { category_id: categoryId },
success: function(data) {
$('#subcategory').html(data); // 将返回的数据（HTML选项）填充到子分类下拉框
}
});
}
</script>
</body>
</html>
### PHP 部分 (`load_subcategories.php`)
<?php
// 假设数据库连接已建立，这里仅使用示例数据
$category_id = isset($_GET['category_id']) ? $_GET['category_id'] : '';
$subcategories = [];
if ($category_id == '1') {
$subcategories = [
['id' => '1', 'name' => '子分类1-1'],
['id' => '2', 'name' => '子分类1-2'],
];
} elseif ($category_id == '2') {
$subcategories = [
['id' => '3', 'name' => '子分类2-1'],
['id' => '4', 'name' => '子分类2-2'],
];
}
// 生成HTML选项
$options = '<option value="">请选择...</option>';
foreach ($subcategories as $subcategory) {
$options .= "<option value='{$subcategory['id']}'>{$subcategory['name']}</option>";
}
echo $options;
?>
在这个示例中，当用户从第一个下拉框中选择一个分类时，`loadSubcategories` 函数会被触发，该函数通过AJAX向服务器发送一个GET请求，请求中包含所选分类的ID。服务器端的PHP脚本 (`load_subcategories.php`) 根据这个ID查询相应的子分类，并将它们作为HTML选项返回。然后，这些选项会被插入到第二个下拉框中。
请注意，这个示例假设您已经有一个运行中的PHP环境，并且已经设置了数据库连接（尽管在这个示例中我们并没有直接使用数据库，而是使用了静态数组来模拟数据）。在实际应用中，您应该根据需要从数据库中查询子分类数据。