精准控制：在动态表格中实现每行独立的Ajax下拉联动

// 在Ajax成功回调函数中
success: function(result) {
    // subSelect 现在只指向当前行中的 .sub-category-dropdown
    subSelect.html(result);
}

$(document).ready(function() {
    // 将事件委托到表格元素 #Cateogry
    // 确保即使行被动态添加，事件也能被正确捕获
    $('#Cateogry').on('change', '.category-dropdown', function() {
        // $(this) 仍然指向触发事件的 .category-dropdown 元素
        const subSelect = $(this).closest("tr").find(".sub-category-dropdown");
        var category_id = this.value;

        // 执行Ajax请求
        $.ajax({
            url: "fetch-subcategory-by-category.php",
            type: "POST",
            data: {
                category_id: category_id
            },
            cache: false,
            success: function(result) {
                // 将结果填充到当前行的子类别下拉菜单
                subSelect.html(result);
            },
            error: function(xhr, status, error) {
                console.error("Ajax request failed: ", status, error);
                // 可以在这里添加错误处理逻辑，例如清空子类别下拉菜单
                subSelect.html('<option value="">加载失败</option>');
            }
        });
    });
});

<table class="center" id="Cateogry">
    <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" id="CATEGORY-DROPDOWN-1">
                        <option value="">Select Category</option>
                        <!-- PHP loop to populate categories -->
                        <?php
                           // require_once "../config.php"; // Assuming config is loaded elsewhere
                           // $result = mysqli_query($con,"SELECT * FROM menu_category where outlet_id = 18");
                           // while($row = mysqli_fetch_array($result)) {
                           //    echo '<option value="' . $row['category_id'] . '">' . $row["category_name"] . '</option>';
                           // }
                        ?>
                    </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" id="SUBCATEGORY-1">
                        <!-- Subcategories will be loaded here via Ajax -->
                    </select>
                </div>
            </td>
        </tr>
        <!-- 第二行 (结构与第一行相同，类名也相同，通过JS上下文区分) -->
        <tr>
            <td>
                <div class="form-group">
                    <label for="CATEGORY-DROPDOWN-2">Category</label>
                    <select class="form-control category-dropdown" id="CATEGORY-DROPDOWN-2">
                        <option value="">Select Category</option>
                        <!-- PHP loop to populate categories -->
                    </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" id="SUBCATEGORY-2">
                        <!-- Subcategories will be loaded here via Ajax -->
                    </select>
                </div>
            </td>
        </tr>
        <!-- 更多行可以动态添加或移除 -->
    </tbody>
</table>

<script>
    $(document).ready(function() {
        // 使用事件委托，将 'change' 事件绑定到 #Cateogry 表格上
        // 这样即使表格行是动态添加的，事件也能被正确处理
        $('#Cateogry').on('change', '.category-dropdown', function() {
            // 获取当前选中的分类ID
            var category_id = this.value;

            // 查找当前行中对应的子类别下拉菜单
            // $(this) 是触发事件的 .category-dropdown
            // .closest("tr") 找到它最近的父级 <tr>
            // .find(".sub-category-dropdown") 在该 <tr> 内部查找 .sub-category-dropdown
            const subSelect = $(this).closest("tr").find(".sub-category-dropdown");

            // 如果没有选择任何分类，清空子类别下拉菜单并返回
            if (!category_id) {
                subSelect.html('<option value="">Select Sub Category</option>');
                return;
            }

            // 发送Ajax请求获取子类别数据
            $.ajax({
                url: "fetch-subcategory-by-category.php", // 后端处理脚本
                type: "POST",
                data: {
                    category_id: category_id // 传递选中的分类ID
                },
                cache: false, // 禁用缓存
                success: function(result) {
                    // 将Ajax返回的结果填充到当前行的子类别下拉菜单中
                    subSelect.html(result);
                },
                error: function(xhr, status, error) {
                    console.error("Ajax请求失败: ", status, error);
                    // 错误处理：显示错误信息或清空下拉菜单
                    subSelect.html('<option value="">加载子类别失败</option>');
                }
            });
        });
    });
</script>