本文将解决在使用 AJAX 动态填充表格时，类别选择下拉菜单联动子类别下拉菜单，但所有行同时更新的问题。核心在于如何让每个类别的选择事件只影响到对应行的子类别下拉菜单。通过修改 JavaScript 代码，我们将实现每一行的类别选择独立触发 AJAX 请求，仅更新对应行的子类别下拉菜单，从而避免数据混乱。
问题分析
目前的代码中，.category-dropdown 的 change 事件绑定是全局性的，当任何一个类别下拉菜单改变时，都会触发 AJAX 请求，并且所有 .sub-category-dropdown 的内容都会被替换。因此，我们需要将事件绑定限制在当前行，并只更新当前行对应的子类别下拉菜单。
解决方案
核心在于使用 jQuery 的 $(this) 和 closest()、find() 方法。$(this) 指的是触发事件的元素（即当前选中的类别下拉菜单），closest(“tr”) 找到该元素最近的父级
元素，然后 find(“.sub-category-dropdown”) 在该 元素内查找子类别下拉菜单。
修改后的 JavaScript 代码如下：
$(document).ready(function() { $('.category-dropdown').on('change', function() { var category_id = this.value; // 找到当前行对应的子类别下拉菜单 const subSelect = $(this).closest("tr").find(".sub-category-dropdown"); $.ajax({ url: "fetch-subcategory-by-category.php", type: "POST", data: { category_id: category_id }, cache: false, success: function(result) { // 只更新当前行的子类别下拉菜单 subSelect.html(result); } }); }); });
代码解释：
$(this).closest(“tr”): 从当前触发 change 事件的 .category-dropdown 元素开始，向上查找最近的 父元素。.find(“.sub-category-dropdown”): 在找到的 元素内部，查找 class 为 .sub-category-dropdown 的元素，即当前行对应的子类别下拉菜单。subSelect.html(result): 使用 AJAX 请求返回的结果 result 更新当前行对应的子类别下拉菜单的内容。
示例代码
以下是一个完整的示例，包含 HTML 和 JavaScript 代码：
| Category | Item |
|---|---|
| Select Category <option value=""> | |
| Category | Item |
| Select Category <option value=""> | |
fetch-subcategory-by-category.php 示例 (仅供参考):
<?php require_once "../config.php"; // 确保 config.php 包含数据库连接信息 if(isset($_POST['category_id']) && !empty($_POST['category_id'])){ $category_id = $_POST['category_id']; $result = mysqli_query($con,"SELECT * FROM menu_subcategory WHERE category_id = $category_id"); echo "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 请求，仅更新对应行的子类别下拉菜单，从而避免数据混乱，实现表格行的独立处理。
以上就是AJAX 独立处理表格行：实现类别选择联动子类别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1571638.html
微信扫一扫 
支付宝扫一扫 
