本文讲解如何在动态增删行的 html 表格中，确保每个“分类下拉框”的变更仅触发对应行的“子分类下拉框”更新，避免所有行同时被填充。核心在于精准定位当前操作行内的目标元素。

本文讲解如何在动态增删行的 html 表格中，确保每个“分类下拉框”的变更仅触发对应行的“子分类下拉框”更新，避免所有行同时被填充。核心在于精准定位当前操作行内的目标元素。

在构建多行可编辑表单（如菜单项配置）时，一个常见问题是：当多个行共用相同 class（如 .category-dropdown 和 .sub-category-dropdown）且通过 jQuery 绑定全局事件时，AJAX 成功回调中若使用 $(".sub-category-dropdown").html(result)，会批量更新所有匹配的下拉框，而非仅更新当前行——这正是你遇到的问题。

根本原因在于事件委托后未做作用域限定：.change() 触发时，this 指向当前被操作的 ，但后续 $(".sub-category-dropdown") 是全局选择器，无视上下文。

✅ 正确做法是：利用 DOM 层级关系，从当前 向上找到其所在 ，再向下查找该行内唯一的 .sub-category-dropdown。推荐使用 jQuery 的链式方法：

$(document).ready(function() {
  $('.category-dropdown').on('change', function() {
    const $this = $(this);
    const category_id = $this.val();

    // ✅ 精准定位：获取当前 select 所在行的 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,
      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).html('<option value="">Error loading items</option>');
      }
    });
  });
});

? 关键点说明：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

• $(this).closest('tr')：向上查找最近的 祖先（兼容嵌套结构，比 .parent().parent() 更健壮）；
• .find('.sub-category-dropdown')：在该 内部精确查找目标下拉框，完全隔离其他行；
• 添加 beforeSend 和 error 处理，提升用户体验与健壮性；
• 对空值（Select Category）做显式清空和提示，避免残留旧选项。

⚠️ 注意事项：

• 动态新增行时，需确保新插入的

元素也具备 .category-dropdown 和 .sub-category-dropdown 类名；

若使用 .on() 动态绑定（如配合 $(document).on('change', '.category-dropdown', ...)），上述 closest('tr') 逻辑依然有效；

PHP 后端 fetch-subcategory-by-category.php 应校验 category_id 参数并返回标准 HTML 片段（例如： Burger Pizza）。

通过这种基于 DOM 路径的上下文感知方式，无论表格有多少行、是否动态增删，每行的联动逻辑都彼此独立、互不干扰——这才是可扩展、易维护的前端交互设计实践。