Laravel视图下使用JavaScript实现分类/子分类联动搜索故障求助

• 对aiz-selectpicker（基于Bootstrap Select封装）的更新逻辑错误：你在循环追加option的过程中反复调用$(".aiz-selectpicker").selectpicker()重复初始化组件，且没有调用refresh方法更新组件渲染内容，新增的option不会被下拉组件识别展示。
• 控制器返回数据未明确指定JSON格式：虽然Laravel集合会自动转JSON，但部分场景下响应头不对会导致前端识别为普通字符串，无法遍历。
• 多语言适配缺失：前端分类展示调用了getTranslation('name')取多语言名称，但控制器直接返回原始name字段，多语言站点下会展示错误。
• 页面初始加载无默认子分类：进入页面时如果分类下拉已有默认选中值，不会自动触发联动加载对应子分类。
• 可选问题：如果路由没有定义POST类型的subcategories.get_subcategories_by_category路由，会直接报404导致请求失败。

1. 修正JS逻辑 #

替换原JS代码为以下内容：

// 页面加载完成后执行
$(document).ready(function(){
    // 页面初始化时先加载默认选中分类的子分类
    get_subcategories_by_category();

    // 分类切换监听
    $('#category_id').on('change', function() {
        get_subcategories_by_category();
    });

    $('#subcategory_id').on('change', function() {
        get_subsubcategories_by_subcategory();
    });
});

function get_subcategories_by_category(){
    var category_id = $('#category_id').val();
    $.post('{{ route('subcategories.get_subcategories_by_category') }}',{
        _token:'{{ csrf_token() }}', 
        category_id:category_id
    }, function(data){
        $('#subcategory_id').empty();
        // 先追加所有option
        for (var i = 0; i < data.length; i++) {
            $('#subcategory_id').append($('<option>', {
                value: data[i].id,
                text: data[i].name
            }));
        }
        // 全部追加完成后再刷新selectpicker组件
        $("#subcategory_id").selectpicker('refresh');
        // 触发下一级联动
        get_subsubcategories_by_subcategory();
    }).fail(function(){
        // 可选：添加请求失败日志，方便排查
        console.log('子分类加载失败，请检查路由/接口是否正常');
    });
}

2. 修正控制器代码 #

明确返回JSON格式，适配多语言：

public function get_subcategories_by_category(Request $request)
{
    $subcategories = SubCategory::where('category_id', $request->category_id)->get()
        ->map(function($subcategory){
            return [
                'id' => $subcategory->id,
                'name' => $subcategory->getTranslation('name')
            ];
        });
    return response()->json($subcategories);
}

3. 确认路由配置 #

检查routes/web.php中是否存在对应POST路由：

Route::post('subcategories/get-by-category', [你的控制器类名::class, 'get_subcategories_by_category'])->name('subcategories.get_subcategories_by_category');

注意把代码里的你的控制器类名替换为实际的控制器类名。

4. 输入自动匹配功能实现 #

你使用的aiz-selectpicker已经自带data-live-search="true"属性，不需要额外开发即可实现输入关键词自动匹配下拉选项的功能，如果需要自定义匹配逻辑可以修改组件官方配置即可。

内容的提问来源于stack exchange，提问作者danajoo