解决动态表格中AJAX联动下拉菜单的数据隔离问题

<table class="center" id="Category">
    <thead>
        <tr>
            <th>Category</th>
            <th>Item</th>
        </tr>
    </thead>
    <tbody>
        <!-- 第一行 -->
        <tr>
            <td>
                <div class="form-group">
                    <label for="CATEGORY-DROPDOWN-1">Category</label>
                    <select class="form-control category-dropdown">
                        <option value="">Select Category</option>
                        <!-- PHP动态加载分类选项 -->
                    </select>
                </div>
            </td>
            <td style="width:30%">
                <div class="form-group">
                    <label for="SUBCATEGORY-1">Sub Category</label>
                    <select class="form-control sub-category-dropdown">
                        <!-- AJAX填充子分类选项 -->
                    </select>
                </div>
            </td>
        </tr>
        <!-- 第二行 (结构与第一行相同，类名也相同) -->
        <tr>
            <td>
                <div class="form-group">
                    <label for="CATEGORY-DROPDOWN-2">Category</label>
                    <select class="form-control category-dropdown">
                        <option value="">Select Category</option>
                        <!-- PHP动态加载分类选项 -->
                    </select>
                </div>
            </td>
            <td style="width:30%">
                <div class="form-group">
                    <label for="SUBCATEGORY-2">Sub Category</label>
                    <select class="form-control sub-category-dropdown">
                        <!-- AJAX填充子分类选项 -->
                    </select>
                </div>
            </td>
        </tr>
        <!-- 更多行可以动态添加 -->
    </tbody>
</table>

<script>
    $(document).ready(function() {
        $('.category-dropdown').on('change', function() {
            var category_id = this.value;
            $.ajax({
                url: "fetch-subcategory-by-category.php",
                type: "POST",
                data: {
                    category_id: category_id
                },
                cache: false,
                success: function(result) {
                    // 问题所在：全局选择器，会影响所有 .sub-category-dropdown
                    $(".sub-category-dropdown").html(result);
                }
            });
        });
    });
</script>

<script>
    $(document).ready(function() {
        // 使用事件委托，确保对动态添加的行也有效
        $('#Category').on('change', '.category-dropdown', function() {
            var category_id = this.value;
            // 缓存当前触发事件的元素，以便在回调中使用
            const $currentCategoryDropdown = $(this); 

            $.ajax({
                url: "fetch-subcategory-by-category.php",
                type: "POST",
                data: {
                    category_id: category_id
                },
                cache: false,
                success: function(result) {
                    // 1. 向上查找最近的父级<tr>元素
                    // 2. 在该<tr>内部向下查找 .sub-category-dropdown 元素
                    const $subSelect = $currentCategoryDropdown.closest("tr").find(".sub-category-dropdown");
                    // 将AJAX结果填充到找到的特定下拉菜单中
                    $subSelect.html(result);
                },
                error: function(xhr, status, error) {
                    // 错误处理：例如，在控制台打印错误信息
                    console.error("AJAX request failed: ", status, error);
                    // 或者向用户显示错误消息
                    alert("加载子分类失败，请重试。");
                }
            });
        });
    });
</script>

<?php
// fetch-subcategory-by-category.php
require_once "../config.php"; // 引入数据库配置

if (isset($_POST['category_id'])) {
    $category_id = $_POST['category_id'];

    // 查询子分类数据
    $query = "SELECT * FROM menu_items WHERE category_id = ? ORDER BY item_name ASC";
    $stmt = mysqli_prepare($con, $query);
    mysqli_stmt_bind_param($stmt, "i", $category_id);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);

    $output = '<option value="">Select Item</option>'; // 默认选项
    while ($row = mysqli_fetch_array($result)) {
        $output .= '<option value="' . $row['item_id'] . '">' . $row['item_name'] . '</option>';
    }
    echo $output;
    mysqli_stmt_close($stmt);
} else {
    echo '<option value="">No Category Selected</option>';
}
mysqli_close($con);
?>