如何用PHP实现品牌选择联动产品下拉框动态展示

嘿，我来帮你搞定这个品牌-产品联动下拉框的需求！下面是一套完整的PHP实现方案，分前端、后端和数据库查询三个部分，代码都给你写好了，直接改改配置就能用~

1. 前端HTML结构 #

先写出两个下拉框的基础结构，第一个品牌下拉先从数据库加载所有品牌选项，第二个产品下拉初始显示提示文本。同时用JavaScript监听品牌选择的变化，通过AJAX请求后端接口获取对应产品。

<!-- 品牌选择下拉框 -->
<select id="brandSelect">
    <option value="">请选择品牌</option>
    <?php
    // 连接数据库（替换成你的数据库信息）
    $dbConn = mysqli_connect("localhost", "你的数据库用户名", "你的数据库密码", "你的数据库名");
    // 查询所有品牌
    $brandSql = "SELECT brand_id, brand_name FROM brand";
    $brandResult = mysqli_query($dbConn, $brandSql);
    // 循环输出品牌选项
    while ($brand = mysqli_fetch_assoc($brandResult)) {
        echo "<option value='{$brand['brand_id']}'>{$brand['brand_name']}</option>";
    }
    mysqli_close($dbConn);
    ?>
</select>

<!-- 产品选择下拉框（动态加载） -->
<select id="productSelect">
    <option value="">请先选择品牌</option>
</select>

<!-- JavaScript 监听品牌选择事件 -->
<script>
document.getElementById('brandSelect').addEventListener('change', function() {
    const selectedBrandId = this.value;
    const productDropdown = document.getElementById('productSelect');

    // 如果没选品牌，重置产品下拉框
    if (!selectedBrandId) {
        productDropdown.innerHTML = "<option value=''>请先选择品牌</option>";
        return;
    }

    // 发送AJAX请求到后端获取对应产品
    fetch('get_products.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `brand_id=${selectedBrandId}`
    })
    .then(response => response.text())
    .then(html => {
        productDropdown.innerHTML = html;
    })
    .catch(err => {
        console.error('加载产品出错:', err);
        productDropdown.innerHTML = "<option value=''>加载失败，请重试</option>";
    });
});
</script>

2. 后端PHP接口（get_products.php） #

这个文件负责接收前端传来的品牌ID，查询对应品牌的产品，然后输出产品选项的HTML代码。这里默认你的产品表叫products，包含product_id（产品ID）、product_name（产品名称）、brand_id（关联品牌表的ID）三个核心字段，如果你的表结构不一样，记得修改查询语句里的字段名~

<?php
// 连接数据库（替换成你的数据库信息）
$dbConn = mysqli_connect("localhost", "你的数据库用户名", "你的数据库密码", "你的数据库名");
if (!$dbConn) {
    die("数据库连接失败: " . mysqli_connect_error());
}

// 获取前端传来的品牌ID，转成整数防止SQL注入
$brandId = isset($_POST['brand_id']) ? intval($_POST['brand_id']) : 0;

// 用预处理语句查询产品（安全防注入）
$productSql = "SELECT product_id, product_name FROM products WHERE brand_id = ?";
$stmt = mysqli_prepare($dbConn, $productSql);
mysqli_stmt_bind_param($stmt, "i", $brandId);
mysqli_stmt_execute($stmt);
$productResult = mysqli_stmt_get_result($stmt);

// 输出产品选项
if (mysqli_num_rows($productResult) > 0) {
    echo "<option value=''>请选择产品</option>";
    while ($product = mysqli_fetch_assoc($productResult)) {
        echo "<option value='{$product['product_id']}'>{$product['product_name']}</option>";
    }
} else {
    echo "<option value=''>该品牌暂无产品</option>";
}

// 关闭连接
mysqli_stmt_close($stmt);
mysqli_close($dbConn);
?>

3. 关键注意事项 #

• 一定要把代码里的数据库连接信息（用户名、密码、数据库名）替换成你自己的。
• 如果你的产品表名称、字段名和我假设的不一样，比如产品名称字段叫name而不是product_name，记得修改查询语句里的对应字段。
• 我用了预处理语句来防止SQL注入，这是生产环境必须的安全操作，别偷懒直接拼SQL哦~

内容的提问来源于stack exchange，提问作者Assad Rajab