php如何实现前端下拉框动态数据源_php按条件查询返回json供select渲染

<?php
header('Content-Type: application/json; charset=utf-8');

// 模拟数据库连接（请替换为实际数据库配置）
$pdo = new PDO("mysql:host=localhost;dbname=your_db", "username", "password");
$pdo->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]);
?>

<label>选择类别：
  <select id="category">
    <option value="">请选择类别</option>
    <option value="1">类别A</option>
    <option value="2">类别B</option>
  </select>
</label>

<label>动态下拉框：
  <select id="dynamicSelect" disabled>
    <option>请选择上方类别</option>
  </select>
</label>

<script>
document.getElementById('category').addEventListener('change', function() {
  const categoryId = this.value;
  const targetSelect = document.getElementById('dynamicSelect');

  if (!categoryId) {
    targetSelect.disabled = true;
    targetSelect.innerHTML = '<option>请选择上方类别</option>';
    return;
  }

  targetSelect.disabled = true;
  targetSelect.innerHTML = '<option>加载中...</option>';

  fetch('get_options.php?category_id=' + categoryId)
    .then(response => response.json())
    .then(data => {
      if (data.error) {
        targetSelect.innerHTML = '<option>' + data.error + '</option>';
        return;
      }

      targetSelect.innerHTML = ''; // 清空
      if (data.data.length === 0) {
        targetSelect.innerHTML = '<option>无可用选项</option>';
      } else {
        data.data.forEach(item => {
          const option = document.createElement('option');
          option.value = item.id;
          option.textContent = item.name;
          targetSelect.appendChild(option);
        });
      }
      targetSelect.disabled = false;
    })
    .catch(err => {
      console.error('请求失败:', err);
      targetSelect.innerHTML = '<option>加载失败</option>';
    });
});
</script>