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

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

问题分析

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

解决方案

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

修改后的 JavaScript 代码如下：

<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>

代码解释：

1. $(this).closest(“tr”): 从当前触发 change 事件的 .category-dropdown 元素开始，向上查找最近的
   父元素。

2. .find(“.sub-category-dropdown”): 在找到的
   元素内部，查找 class 为 .sub-category-dropdown 的元素，即当前行对应的子类别下拉菜单。

3. subSelect.html(result): 使用 AJAX 请求返回的结果 result 更新当前行对应的子类别下拉菜单的内容。

示例代码

以下是一个完整的示例，包含 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://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>

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 "<option value=''>Select Sub Category</option>";         while($row = mysqli_fetch_array($result)) {             echo "<option value='".$row['subcategory_id']."'>".$row["subcategory_name"]."</option>";         }     } else {         echo "<option value=''>No Sub Category Available</option>";     } ?>

注意事项：

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

  总结

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