通过PHP查询数据库并返回JSON，前端用Ajax动态填充select。1. 后端PHP接收参数，预处理查询数据，输出JSON；2. 前端监听事件，发送请求，成功后渲染option；3. 注意同源策略、防注入、编码设置与错误处理；4. 可扩展至搜索、联动、分页场景。
在Web开发中，前端下拉框（select）的选项数据常常需要根据用户操作或条件动态加载。PHP结合前端JavaScript（如Ajax）可以很好地实现这一需求。以下是完整的实现方式：通过PHP按条件查询数据库，返回JSON格式数据，供前端select元素动态渲染。
1. 后端PHP：按条件查询并返回JSON
创建一个PHP接口文件（例如 get_options.php），接收前端传来的查询条件（如分类ID、搜索关键词等），从数据库查询数据，并以JSON格式输出。
示例代码：
setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// 接收前端传来的条件参数
$category_id = $_GET['category_id'] ?? null;
if (!$category_id) {
echo json_encode(['error' => '缺少必要参数']);
exit;
}
// 根据条件查询数据
$sql = "SELECT id, name FROM options WHERE category_id = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$category_id]);
$options = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 返回JSON数据
echo json_encode(['data' => $options]);
?>
2. 前端HTML + JavaScript：使用Ajax获取数据并填充select
前端页面中包含一个 select 元素，通过监听某个事件（如下拉框变化、页面加载等）触发Ajax请求，获取数据后动态生成 option 标签。
示例代码：3. 关键点说明
- 跨域问题：确保前端页面与 get_options.php 在同一域名下，避免CORS问题。若需跨域，PHP需添加相应响应头（如 Access-Control-Allow-Origin）。
- SQL注入防护：使用预处理语句（PDO prepare）防止恶意输入。
- 字符编码：设置 header('Content-Type: application/json; charset=utf-8') 避免中文乱码。
- 错误处理：对缺失参数、数据库异常等情况返回结构化错误信息。
- 性能优化：可对频繁请求加缓存（如Redis）、限制请求频率等。
4. 扩展场景
- 搜索型下拉：配合 input 输入实时搜索，用 debounce 减少请求次数。
- 多级联动：多个 select 联动（省市区），每次选择触发下一级请求。
- 分页加载：数据量大时支持 offset/limit 分页加载更多选项。
