动态表格分类下拉触发Ajax 如何实现每行单独请求不全局填充

现有代码存在两处逻辑缺陷，导致无法实现行级独立更新：

• Ajax成功回调使用全局选择器$(".sub-category-dropdown")，会匹配页面所有子分类下拉框，返回数据会同步填充到所有行
• change事件直接绑定在页面初始化时存在的分类下拉框上，后续动态新增的行无法触发该事件，不支持动态增删行的使用场景

不需要为不同行设置独立class，通过DOM相对位置定位当前行的目标元素即可，同时改用事件委托适配动态增删行的需求，直接替换原有脚本内容为以下代码：

<script>
$(document).ready(function() {
    // 事件委托绑定到常驻的表格元素，自动适配后续动态新增的行
    $('#Cateogry').on('change', '.category-dropdown', function() {
        var category_id = this.value;
        // 定位当前触发事件的下拉框所属的表格行
        var $currentRow = $(this).closest('tr');
        // 提前锁定当前行内的子分类下拉框，限定操作范围
        var $subCategorySelect = $currentRow.find('.sub-category-dropdown');
        
        $.ajax({
            url: "fetch-subcategory-by-category.php",
            type: "POST",
            data: {
                category_id: category_id
            },
            cache: false,
            success: function(result) {
                // 仅更新当前行的子分类下拉框，不影响其他行
                $subCategorySelect.html(result);
            }
        });
    });
});
</script>

注意：代码中使用的表格选择器#Cateogry和现有HTML里的表格id拼写完全一致，如果后续修正了这个id的拼写错误，记得同步修改JS里对应的选择器。

• 用$(this).closest('tr')向上查找当前选中分类下拉框所属的最近一级表格行，精准锁定操作范围
• 查找子分类下拉框时限定在当前行范围内，不会匹配其他行的同名class元素
• 事件绑定在页面加载时就存在的表格元素上，后续动态新增、删除行都不需要重新绑定事件，自动适配动态行场景

内容的提问来源于stack exchange，提问作者Ashish Dutt Sharma