AJAX 独立处理表格行：实现类别选择联动子类别

本文将解决在使用 AJAX 动态填充表格时，类别选择下拉菜单联动子类别下拉菜单，但所有行同时更新的问题。核心在于如何让每个类别的选择事件只影响到对应行的子类别下拉菜单。通过修改 JavaScript 代码，我们将实现每一行的类别选择独立触发 AJAX 请求，仅更新对应行的子类别下拉菜单，从而避免数据混乱。

问题分析

目前的代码中，.category-dropdown 的 change 事件绑定是全局性的，当任何一个类别下拉菜单改变时，都会触发 AJAX 请求，并且所有 .sub-category-dropdown 的内容都会被替换。因此，我们需要将事件绑定限制在当前行，并只更新当前行对应的子类别下拉菜单。

解决方案

核心在于使用 jQuery 的 $(this) 和 closest()、find() 方法。$(this) 指的是触发事件的元素（即当前选中的类别下拉菜单），closest("tr") 找到该元素最近的父级

修改后的 JavaScript 代码如下：

代码解释：

晓语台

晓语台，是一款AI文本创作产品。创作能力主要围绕营销文本的AI创作，晓语台覆盖了品牌与市调、商业媒体、社交媒体、搜索营销、数字广告、职场办公共六类全营销文本

下载

1. $(this).closest("tr"): 从当前触发 change 事件的 .category-dropdown 元素开始，向上查找最近的 父元素。
2. .find(".sub-category-dropdown"): 在找到的 元素内部，查找 class 为 .sub-category-dropdown 的元素，即当前行对应的子类别下拉菜单。
3. subSelect.html(result): 使用 AJAX 请求返回的结果 result 更新当前行对应的子类别下拉菜单的内容。

示例代码

以下是一个完整的示例，包含 HTML 和 JavaScript 代码：

    

        
Category
        
Item
    
    

        

            

                Category
                
                    Select Category
                    
                    
                    
                
            
        
        

            

                Sub Category
                
                
            
        
    

    

        
Category
        
Item
    
    

        

            

                Category
                
                    Select Category
                    
                    
                    
                
            
        
        

            

                Sub Category
                
                
            
        
    

fetch-subcategory-by-category.php 示例 (仅供参考):

Select Sub Category";
        while($row = mysqli_fetch_array($result)) {
            echo "".$row["subcategory_name"]."";
        }
    } else {
        echo "No Sub Category Available";
    }
?>

注意事项：

• 确保 fetch-subcategory-by-category.php 脚本的路径正确。
• config.php 文件需要包含数据库连接信息。
• 在实际项目中，应该对 AJAX 请求进行错误处理，例如使用 error 回调函数。
• 为了提高用户体验，可以在 AJAX 请求发送前显示加载动画，请求完成后隐藏动画。
• 这个解决方案假设每个类别下拉菜单和子类别下拉菜单都在同一个 元素内。如果 HTML 结构不同，需要相应地修改 closest() 和 find() 方法的选择器。

  总结

  通过使用 jQuery 的 $(this).closest("tr").find(".sub-category-dropdown")，我们可以精确地定位到当前行对应的子类别下拉菜单，并使用 AJAX 请求返回的数据更新它。 这种方法可以确保每个类别选择独立触发 AJAX 请求，仅更新对应行的子类别下拉菜单，从而避免数据混乱，实现表格行的独立处理。