PHP库存管理系统：实现产品关联Item下拉框动态筛选求助

1. 确认数据库关联逻辑 #

首先确保stock_designation表存在关联stock_products的外键字段（比如product_id），该字段对应stock_products表的主键（比如id），确保两张表的关联关系正确。

2. 修改后端fetch_designations.php #

接收前端传递的产品ID参数，返回对应关联的Item数据，注意用预处理语句避免SQL注入：

<?php
// 替换为你的数据库连接信息
$conn = mysqli_connect("localhost", "username", "password", "dbname");

if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}

// 获取前端传入的产品ID
$product_id = isset($_GET['product_id']) ? intval($_GET['product_id']) : 0;

// 查询对应产品的Item数据
$sql = "SELECT id, designation_name FROM stock_designation WHERE product_id = ?";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, "i", $product_id);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

// 组装返回数据
$designations = [];
while ($row = mysqli_fetch_assoc($result)) {
    $designations[] = $row;
}

// 设置响应头并返回JSON
header('Content-Type: application/json');
echo json_encode($designations);

// 关闭资源
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

3. 修改前端designation.js #

监听产品下拉框的变化事件，发送AJAX请求并动态更新Item下拉框：

// 替换为你页面中实际的下拉框ID
const productSelect = document.getElementById('product_select');
const designationSelect = document.getElementById('designation_select');

// 监听产品选择变更
productSelect.addEventListener('change', function() {
    const productId = this.value;
    
    // 清空Item下拉框默认选项
    designationSelect.innerHTML = '<option value="">请选择Item</option>';
    
    // 未选择产品时终止执行
    if (!productId) return;
    
    // 发送请求获取关联Item
    fetch(`fetch_designations.php?product_id=${productId}`)
        .then(response => {
            if (!response.ok) throw new Error('请求失败');
            return response.json();
        })
        .then(data => {
            // 遍历数据生成选项
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.id;
                option.textContent = item.designation_name;
                designationSelect.appendChild(option);
            });
        })
        .catch(err => console.error('加载Item失败:', err));
});

// 页面加载时，若产品下拉框有默认值则自动触发筛选
window.addEventListener('load', () => {
    if (productSelect.value) {
        productSelect.dispatchEvent(new Event('change'));
    }
});

4. 检查supplier.php的HTML结构 #

确保产品下拉框的value绑定的是stock_products的主键ID，Item下拉框ID与JS中的一致：

<!-- 产品下拉框 -->
<select id="product_select" name="product_id">
    <?php
    // 原有加载产品的代码，确保value为产品ID
    $sql = "SELECT id, product_name FROM stock_products";
    $result = mysqli_query($conn, $sql);
    while ($row = mysqli_fetch_assoc($result)) {
        echo "<option value='{$row['id']}'>{$row['product_name']}</option>";
    }
    ?>
</select>

<!-- Item下拉框 -->
<select id="designation_select" name="designation_id">
    <option value="">请选择Item</option>
</select>

排查要点 #

• 打开浏览器控制台（F12）查看是否有AJAX请求报错、JSON格式错误
• 确认fetch_designations.php中的表名、字段名与数据库实际一致
• 检查stock_designation表中存在对应产品ID的关联记录

内容的提问来源于stack exchange，提问作者melio.achour