如何通过父类别下拉框动态加载唯一子类别选项-php教程-PHP中文网

如何通过父类别下拉框动态加载唯一子类别选项

本文详解解决父子级下拉联动中子选项重复显示的问题，核心在于修正 jQuery 获取选中值的方式（应使用 .val() 而非 .data('id')），并优化 PHP 数据返回逻辑，确保子类别按 parent_cat_id 准确、无重复地渲染。

本文详解解决父子级下拉联动中子选项重复显示的问题，核心在于修正 jquery 获取选中值的方式（应使用 `.val()` 而非 `.data('id')`），并优化 php 数据返回逻辑，确保子类别按 parent_cat_id 准确、无重复地渲染。

在构建多级分类选择功能时，常见的父子下拉联动（如“商品大类 → 子品类”）若出现子选项重复渲染，往往并非数据库数据重复，而是前端取值错误与后端输出逻辑缺陷共同导致。下面将从问题定位、代码修复到健壮性增强，提供完整解决方案。

? 问题根源分析

原代码中关键错误有两处：

下拉框联动选择菜单代码

下载

前端取值错误：$(this).find(':selected').data('id') 试图读取 data-id 属性，但），未设置 data-id 导致返回 undefined，进而使 AJAX 请求发送空或非法 ID，PHP 端可能执行了无条件查询（如 WHERE parent_cat_id='' 或类型转换失败），意外返回全部子类；
后端输出冗余：data.php 中 $output .= ... 拼接后再 echo $output，但循环内又单独 echo，造成重复输出（例如每行

✅ 正确实现方案

1. 修复前端 JavaScript（index.php）

<script>
$(document).ready(function() {
    $('#parent_category').on('change', function() {
        const parentId = $(this).val(); // ✅ 正确获取 value 值
        if (!parentId) {
            $('#child_category').empty().append('<option value="">请选择子类别');
            return;
        }

        $.ajax({
            url: 'data.php',
            method: 'GET',
            data: { id: parentId },
            dataType: 'html', // 明确预期返回 HTML 片段
            success: function(data) {
                $('#child_category').html(data);
            },
            error: function() {
                $('#child_category').html('<option value="">加载失败');
            }
        });
    });
});
</script>

2. 重构后端响应（data.php）

<?php // data.php —— 使用预处理语句防止 SQL 注入，避免重复输出
$con = mysqli_connect("localhost", "root", "", "nilam-ghar");
if (!$con) die("数据库连接失败");

if (isset($_GET['id']) && is_numeric($_GET['id'])) {
    $id = (int)$_GET['id']; // 强制整型过滤
    $stmt = $con->prepare("SELECT id, name FROM child_category WHERE parent_cat_id = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        $options = '<option value="">请选择...</option>';
        while ($row = $result->fetch_assoc()) {
            $options .= sprintf('<option value="%d">%s</option>', 
                htmlspecialchars($row['id']), 
                htmlspecialchars($row['name'])
            );
        }
        echo $options;
    } else {
        echo '<option value="">暂无子类别</option>';
    }
} else {
    echo '<option value="">无效参数</option>';
}
?>