本文旨在解决在使用Ajax动态填充表格时，由于选择器不精确导致Ajax请求在所有行上重复执行的问题。通过修改jQuery选择器，实现每个表格行独立触发和处理Ajax请求，确保数据的准确性和用户体验。本文将提供详细的代码示例和步骤，帮助你理解和解决此类问题。
在动态生成的表格中使用Ajax，一个常见的问题是事件绑定到多个元素上，导致不必要的重复请求。例如，当你在一个表格的每一行都有一个下拉选择框，并且希望根据选择的内容动态更新另一个下拉框时，如果选择器不精确，更改一个选择框的值可能会触发所有行的Ajax请求。以下是如何解决这个问题的详细步骤：
1. 问题分析
原代码中，.category-dropdown 选择器绑定了 change 事件，并且在 success 回调中，使用 .sub-category-dropdown 选择器更新所有子类别下拉框。这导致每次更改任何一个类别下拉框，所有的子类别下拉框都会被更新，从而产生了重复执行的问题。
2. 解决方案：精准定位子类别下拉框
关键在于找到当前触发 change 事件的类别下拉框所在行的子类别下拉框。可以使用 jQuery 的 closest() 和 find() 方法来实现：
- $(this).closest(“tr”)：从当前触发事件的元素（.category-dropdown）开始，向上查找最近的
元素，即当前行。 - .find(“.sub-category-dropdown”)：在当前行内查找类名为 .sub-category-dropdown 的元素，即当前行的子类别下拉框。
3. 修改后的代码
$(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); } }); }); });代码解释：
- const subSelect = $(this).closest(“tr”).find(“.sub-category-dropdown”);: 这一行代码是关键。它首先使用 $(this) 获取当前触发 change 事件的 .category-dropdown 元素。然后，closest(“tr”) 向上查找最近的
父元素，也就是包含当前类别下拉框的表格行。最后，find(“.sub-category-dropdown”) 在该表格行内查找类名为 .sub-category-dropdown 的元素，即当前行的子类别下拉框。 - subSelect.html(result);: 在Ajax请求成功后，使用 subSelect 这个变量，它现在指向的是当前行的子类别下拉框。将服务器返回的结果 result 填充到这个下拉框中，从而只更新当前行的子类别下拉框，避免了影响其他行。
4. 完整示例
结合 HTML 和 JavaScript，一个完整的示例可能如下所示：
<table class="center" id="Cateogry"> <tr> <th>Category</th> <th>Item</th> </tr> <tr> <td> <div class="form-group"> <label for="CATEGORY-DROPDOWN">Category</label> <select class="form-control category-dropdown"> <option value="">Select Category</option> <?php require_once "../config.php"; $result = mysqli_query($con,"SELECT * FROM menu_category where outlet_id = 18"); while($row = mysqli_fetch_array($result)) { ?> <option value="<?php echo $row['category_id'];?>"><?php echo $row["category_name"];?></option> <?php } ?> </select> </div> </td> <td style="width:30%"> <div class="form-group"> <label for="SUBCATEGORY">Sub Category</label> <select class="form-control sub-category-dropdown"> </select> </div> </td> </tr> <tr> <th>Category</th> <th>Item</th> </tr> <tr> <td> <div class="form-group"> <label for="CATEGORY-DROPDOWN">Category</label> <select class="form-control category-dropdown"> <option value="">Select Category</option> <?php require_once "../config.php"; $result = mysqli_query($con,"SELECT * FROM menu_category where outlet_id = 18"); while($row = mysqli_fetch_array($result)) { ?> <option value="<?php echo $row['category_id'];?>"><?php echo $row["category_name"];?></option> <?php } ?> </select> </div> </td> <td style="width:30%"> <div class="form-group"> <label for="SUBCATEGORY">Sub Category</label> <select class="form-control sub-category-dropdown"> </select> </div> </td> </tr> </table> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(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); } }); }); }); </script>注意：
- 确保引入 jQuery 库。
- fetch-subcategory-by-category.php 文件需要根据 category_id 返回对应的子类别选项的 HTML 代码。
5. 总结
通过使用 $(this).closest(“tr”).find(“.sub-category-dropdown”)，我们能够精准地定位到当前行对应的子类别下拉框，从而避免了不必要的重复请求，提高了程序的效率和用户体验。这个技巧在处理动态生成的表格数据时非常有用，特别是在需要对每一行进行独立操作的场景下。
评论（已关闭）
评论已关闭