本文讲解如何在动态增删行的 html 表格中，确保每个“分类下拉框”的变更仅触发对应行的“子分类下拉框”更新，避免所有行同时被填充。核心在于精准定位当前操作行内的目标元素。
本文讲解如何在动态增删行的 html 表格中，确保每个“分类下拉框”的变更仅触发对应行的“子分类下拉框”更新，避免所有行同时被填充。核心在于精准定位当前操作行内的目标元素。
在构建多行可编辑表单（如菜单项配置）时，一个常见问题是：当多个行共用相同 class（如 .category-dropdown 和 .sub-category-dropdown）且通过 jQuery 绑定全局事件时，AJAX 成功回调中若使用 $(".sub-category-dropdown").html(result)，会批量更新所有匹配的下拉框，而非仅更新当前行——这正是你遇到的问题。
根本原因在于事件委托后未做作用域限定：.change() 触发时，this 指向当前被操作的 <select>，但后续 $(".sub-category-dropdown") 是全局选择器，无视上下文。
✅ 正确做法是：利用 DOM 层级关系，从当前 <select> 向上找到其所在 <tr>，再向下查找该行内唯一的 .sub-category-dropdown。推荐使用 jQuery 的链式方法：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(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>');
}
});
});
});? 关键点说明：
- $(this).closest('tr')：向上查找最近的 <tr> 祖先（兼容嵌套结构，比 .parent().parent() 更健壮）；
- .find('.sub-category-dropdown')：在该 <tr> 内部精确查找目标下拉框，完全隔离其他行；
- 添加 beforeSend 和 error 处理，提升用户体验与健壮性；
- 对空值（Select Category）做显式清空和提示，避免残留旧选项。
⚠️ 注意事项：
- 动态新增行时，需确保新插入的 <select> 元素也具备 .category-dropdown 和 .sub-category-dropdown 类名；
- 若使用 .on() 动态绑定（如配合 $(document).on('change', '.category-dropdown', ...)），上述 closest('tr') 逻辑依然有效；
- PHP 后端 fetch-subcategory-by-category.php 应校验 category_id 参数并返回标准 <option> HTML 片段（例如：<option value="1">Burger</option><option value="2">Pizza</option>）。
通过这种基于 DOM 路径的上下文感知方式，无论表格有多少行、是否动态增删，每行的联动逻辑都彼此独立、互不干扰——这才是可扩展、易维护的前端交互设计实践。
