PHP+jQuery实现select下拉框联动更新从属选项失效问题求助

问题根因 #

1. 执行逻辑错误：PHP 是服务端渲染语言，仅在页面被服务器返回给浏览器之前执行，所有 PHP 代码运行完成后才会把静态内容输出到浏览器；而 JS 是客户端脚本，在用户浏览器端响应用户操作时运行。你把 PHP 数据库查询代码写在 JS 的 change 事件回调里，页面加载完成后 PHP 逻辑早就执行结束了，后续触发 change 事件时不会重新查询数据库，自然拿不到对应分类的子分类值。
2. 语法错误：你通过 PHP 生成的 option 标签写法为 < option，左尖括号和 option 之间多了空格，浏览器无法识别为合法的 DOM 标签，就算有内容也不会渲染到下拉框中。

解决方案 #

方案一：预加载全量子分类（适合分类数量少的场景） #

在页面渲染阶段就把所有子分类按父分类 ID 分组存到 JS 变量里，change 事件触发时直接读取对应分组渲染即可，不需要额外请求后端。

<!-- 在页面头部PHP部分提前生成子分类JSON -->
<script>
// 提前将所有子分类按父分类ID分组
const subCats = <?php
$subCatData = [];
$ret = mysqli_query($con, "select * from modelssubcat");
while($row = mysqli_fetch_assoc($ret)) {
    $subCatData[$row['cat_id']][] = $row;
}
echo json_encode($subCatData);
?>;
</script>

修改你的JS逻辑：

$(document).ready(function() {
    $("#type").change(function() {
        const val = $(this).val();
        let options = `<option>--Select Subcategory--</option>`;
        // 如果当前分类有对应的子分类就拼接option
        if(subCats[val]) {
            subCats[val].forEach(item => {
                options += `<option value="${item.subcat_name}">${item.subcat_name}</option>`
            })
        }
        $("#size").html(options);
    });
});

方案二：AJAX动态请求（适合分类数量多的场景） #

单独写一个后端接口接收分类ID，返回对应子分类列表，JS change事件触发时请求接口渲染结果。

1. 新增后端接口get_subcat.php：

<?php
session_start();
include("inc/connection.php");
$catId = $_GET['cat_id'] ?? 0;
// 做参数转义避免注入
$catId = mysqli_real_escape_string($con, $catId);
$ret = mysqli_query($con, "select * from modelssubcat where cat_id = '{$catId}'");
$res = [];
while($row = mysqli_fetch_assoc($ret)) {
    $res[] = $row;
}
echo json_encode($res);
?>

2. 修改JS逻辑：

$(document).ready(function() {
    $("#type").change(function() {
        const val = $(this).val();
        $.get('get_subcat.php', {cat_id: val}, function(data) {
            const subCats = JSON.parse(data);
            let options = `<option>--Select Subcategory--</option>`;
            subCats.forEach(item => {
                options += `<option value="${item.subcat_name}">${item.subcat_name}</option>`
            })
            $("#size").html(options);
        })
    });
});

注意：生产环境建议使用mysqli预处理语句做参数绑定，彻底避免SQL注入风险

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