本文旨在解决在使用Ajax动态填充表格时，由于选择器不精确导致Ajax请求在所有行上重复执行的问题。通过修改jQuery选择器，实现每个表格行独立触发和处理Ajax请求，确保数据的准确性和用户体验。本文将提供详细的代码示例和步骤，帮助你理解和解决此类问题。
在动态生成的表格中使用Ajax，一个常见的问题是事件绑定到多个元素上，导致不必要的重复请求。例如，当你在一个表格的每一行都有一个下拉选择框，并且希望根据选择的内容动态更新另一个下拉框时，如果选择器不精确，更改一个选择框的值可能会触发所有行的Ajax请求。以下是如何解决这个问题的详细步骤：
1. 问题分析
原代码中，.category-dropdown 选择器绑定了 change 事件，并且在 success 回调中，使用 .sub-category-dropdown 选择器更新所有子类别下拉框。这导致每次更改任何一个类别下拉框，所有的子类别下拉框都会被更新，从而产生了重复执行的问题。
2. 解决方案：精准定位子类别下拉框
关键在于找到当前触发 change 事件的类别下拉框所在行的子类别下拉框。可以使用 jQuery 的 closest() 和 find() 方法来实现：
- $(this).closest("tr")：从当前触发事件的元素（.category-dropdown）开始，向上查找最近的 <tr> 元素，即当前行。
- .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") 向上查找最近的 <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")，我们能够精准地定位到当前行对应的子类别下拉框，从而避免了不必要的重复请求，提高了程序的效率和用户体验。这个技巧在处理动态生成的表格数据时非常有用，特别是在需要对每一行进行独立操作的场景下。
