本文解决动态表格中多个相同类名下拉框共用事件导致 ajax 请求误操作的问题，通过定位当前行元素精准绑定子级下拉框，实现每行独立异步加载。

本文解决动态表格中多个相同类名下拉框共用事件导致 ajax 请求误操作的问题，通过定位当前行元素精准绑定子级下拉框，实现每行独立异步加载。

在构建可动态增删行的表单（如菜单项配置、订单明细录入等）时，常使用统一类名（如 category-dropdown 和 sub-category-dropdown）简化 DOM 操作。但若直接对所有 .category-dropdown 绑定全局 change 事件，并在回调中使用 $(".sub-category-dropdown").html(result)，会导致所有行的子下拉框被同时更新——这显然违背“每行独立联动”的业务需求。

根本原因在于：原始代码中的 $(".sub-category-dropdown") 是全局选择器，未限定作用域。正确做法是从触发事件的 出发，向上查找其所在 ，再向下精准定位本行内的 .sub-category-dropdown。

以下是优化后的完整 JavaScript 实现：

$(document).ready(function() {
    // 使用事件委托，兼容未来动态添加的行（推荐）
    $('#Cateogry').on('change', '.category-dropdown', function() {
        const $this = $(this);
        const category_id = $this.val();

        // ✅ 精准定位本行的 sub-category-dropdown
        const $subSelect = $this.closest('tr').find('.sub-category-dropdown');

        // 防止空值请求
        if (!category_id) {
            $subSelect.empty().append('<option value="">Select Item</option>');
            return;
        }

        $.ajax({
            url: "fetch-subcategory-by-category.php",
            type: "POST",
            data: { category_id: category_id },
            cache: false,
            dataType: 'html', // 明确期望返回 HTML 片段
            beforeSend: function() {
                $subSelect.prop('disabled', true).empty().append('<option>Loading...</option>');
            },
            success: function(result) {
                $subSelect.prop('disabled', false).html(result);
            },
            error: function() {
                $subSelect.prop('disabled', false).empty()
                    .append('<option value="">Failed to load items</option>');
            }
        });
    });
});

? 关键改进点说明：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

• ✅ 作用域隔离：$this.closest('tr').find('.sub-category-dropdown') 确保仅操作当前行的子下拉框；
• ✅ 事件委托：$('#Cateogry').on('change', '.category-dropdown', ...) 支持后续通过 JS 动态插入的新行自动绑定事件，无需重复初始化；
• ✅ 用户体验增强：添加 loading 状态、错误提示及空值处理，避免界面异常；
• ✅ 健壮性提升：校验 category_id 是否为空，防止无意义请求；显式设置 dataType: 'html' 提升解析可靠性。

⚠️ 注意事项：

• 后端脚本 fetch-subcategory-by-category.php 必须严格校验 category_id 参数，防范 SQL 注入（建议使用 PDO 预处理）；
• 若表格结构嵌套复杂（如 内含多层 div），请确保 .closest('tr') 能准确向上寻址，必要时可改用 .closest('tbody > tr')；
• 动态添加新行时，只需复用相同 HTML 结构（含 class="category-dropdown" 和 class="sub-category-dropdown"），无需额外 JS 初始化。

通过以上改造，无论表格拥有多少行、是否动态增删，每个分类下拉框均能独立驱动本行对应的子项加载，真正实现「一行一请求、一行一响应」的精准交互逻辑。