Laravel Voyager实现分类与子分类联动下拉菜单的方法问询

当然可行！而且实现起来一点都不复杂，Voyager本身就支持这种依赖下拉框的功能，完全不需要复杂的定制开发，甚至大部分场景下只需要简单的配置就能搞定，完美解决你担心的“关联错误分类和子分类”的问题。

方案一：利用Voyager内置的dependencies配置（官方推荐） #

这是最简单的方式，不需要写额外的代码，只需要在BREAD字段的Optional Details里配置JSON即可：

步骤1：确认模型关联 #

首先确保你的模型之间的关联是正确的：

• Category模型关联Subcategory：

// App/Models/Category.php
public function subcategories()
{
    return $this->hasMany(Subcategory::class);
}

• Subcategory模型关联Category：

// App/Models/Subcategory.php
public function category()
{
    return $this->belongsTo(Category::class);
}

• Product模型关联Category和Subcategory（你应该已经配置好了）

步骤2：配置BREAD字段的依赖关系 #

1. 进入Voyager后台，找到Products的BREAD设置，点击编辑
2. 找到subcategory_id对应的字段（就是你添加产品时选择子分类的下拉框字段）
3. 在Optional Details输入框中，填入以下JSON配置：

{
  "dependencies": {
    "category_id": {
      "model": "App\\Models\\Subcategory",
      "attribute": "name",
      "foreign_key": "category_id"
    }
  }

解释一下配置项：

• category_id：产品表中关联分类的字段名（你的产品表中存储分类ID的字段，通常是category_id）
• model：子分类模型的完整命名空间路径（注意反斜杠要转义成\\）
• attribute：子分类下拉框中要显示的字段（比如name就是显示子分类名称）
• foreign_key：子分类表中关联分类的外键字段（通常也是category_id）

4. 保存BREAD设置，刷新添加产品的页面，现在当你选择某个分类后，子分类下拉框会自动加载该分类下的所有子分类，其他分类的子分类会被过滤掉！

方案二：自定义JS+路由（备用） #

如果内置的dependencies配置因为版本或其他原因不生效，你可以用自定义JS和路由来实现：

步骤1：添加路由 #

在routes/web.php中添加一个路由，用于根据分类ID获取对应的子分类：

Route::get('/admin/subcategories/by-category/{categoryId}', function($categoryId) {
    // 根据分类ID查询子分类，返回名称和ID的键值对
    $subcategories = \App\Models\Subcategory::where('category_id', $categoryId)->pluck('name', 'id');
    return response()->json($subcategories);
})->name('subcategories.by-category');

步骤2：添加自定义JS #

在Voyager的自定义JS文件（比如public/vendor/tcg/voyager/assets/js/custom.js）中添加以下代码：

// 监听分类下拉框的变化事件
$(document).on('change', '#category_id', function() {
    const categoryId = $(this).val();
    const subcategorySelect = $('#subcategory_id');

    // 如果没有选择分类，清空子分类下拉框
    if (!categoryId) {
        subcategorySelect.empty().append('<option value="">请选择子分类</option>');
        return;
    }

    // 发送AJAX请求获取对应分类的子分类
    $.get('/admin/subcategories/by-category/' + categoryId, function(data) {
        subcategorySelect.empty();
        subcategorySelect.append('<option value="">请选择子分类</option>');
        // 遍历返回的子分类，添加到下拉框中
        $.each(data, function(id, name) {
            subcategorySelect.append(`<option value="${id}">${name}</option>`);
        });
    });
});

步骤3：测试效果 #

刷新添加产品页面，选择分类后，子分类下拉框会动态加载对应的数据，同样能实现过滤效果。

注意事项 #

• 确保你的Voyager版本是2.x及以上，因为dependencies功能是在较新的版本中加入的
• 检查字段名是否正确：产品表的分类字段、子分类表的外键字段要和配置中的一致
• 如果使用自定义JS方案，要确保jQuery已经加载（Voyager默认已经包含jQuery）

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