Laravel 8 实现嵌套下拉菜单并保存所选项-php教程-PHP中文网

Laravel 8 实现嵌套下拉菜单并保存所选项

聖光之護

发布： 2025-08-16 18:00:04

原创

834人浏览过

laravel 8 实现嵌套下拉菜单并保存所选项

本文旨在指导开发者如何在 Laravel 8 中实现一个嵌套下拉菜单，并获取用户所选项的 ID 值，以便进行后续的数据处理和保存。文章将提供模型、控制器和视图层的代码示例，并详细解释如何构建递归组件来动态生成多级下拉菜单。同时，也会讨论如何处理多选情况，并给出相应的建议。

模型 (Model)

首先，我们需要创建一个模型来表示菜单或类别数据。以下是一个 Category 模型的示例，它使用 parent_id 字段来表示层级关系：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    use HasFactory;

    protected $fillable = [
        'parent_id',
        'category_name',
        'description',
        'slug',
        'status',
    ];

    public function children()
    {
        return $this->hasMany(self::class, 'parent_id', 'id');
    }

    public function parent()
    {
        return $this->belongsTo(self::class, 'parent_id');
    }
}

登录后复制

关键点：

$fillable 属性定义了可以被批量赋值的字段。
children() 方法定义了一个一对多的关系，用于获取当前分类的所有子分类。
parent() 方法定义了一个反向的一对一关系，用于获取当前分类的父分类。

控制器 (Controller)

接下来，在控制器中，我们需要获取所有顶级分类（parent_id 为 0 的分类），并将它们传递给视图。

<?php

namespace App\Http\Controllers;

use App\Models\Category;
use Illuminate\Http\Request;

class CategoryController extends Controller
{
    public function create()
    {
        $categories = Category::where('parent_id', 0)->orderBy('category_name', 'asc')->get();
        return view('categories.create', compact('categories'));
    }

    public function store(Request $request)
    {
        // 处理表单提交，保存所选的分类 ID
        $selectedCategories = $request->input('categories');
        // 在这里处理 $selectedCategories，例如保存到数据库
        dd($selectedCategories); // 调试输出
    }
}

登录后复制

关键点：

create() 方法获取所有顶级分类，并传递给 categories.create 视图。
store() 方法接收表单提交的数据，其中包含用户选择的分类 ID。
$request->input('categories') 用于获取名为 "categories" 的输入字段的值，这将在视图中定义。
dd($selectedCategories) 用于调试，方便查看获取到的数据。在实际应用中，需要替换为保存数据的逻辑。

视图 (View)

现在，我们需要创建一个视图来显示嵌套下拉菜单。我们将使用递归组件来动态生成菜单。

categories/create.blade.php:

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

<form action="{{ route('categories.store') }}" method="POST">
    @csrf
    <div class="form-group">
        <label>选择分类*</label>
        <select name="categories[]" class="form-control" multiple>
            <option value="0">无</option>
            @foreach($categories as $category)
                <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                @foreach ($category->children as $sub)
                    @include('categories.subcategories', ['cat' => $sub, 'dashes' => ' -- '])
                @endforeach
            @endforeach
        </select>
    </div>
    <button type="submit" class="btn btn-primary">保存</button>
</form>

登录后复制

categories/subcategories.blade.php (递归组件):

<option value="{{ $cat->id }}">{{ $dashes }}{{  $cat->category_name}}</option>
@php $newDashes = $dashes. ' -- ' @endphp
@foreach ($cat->children as $sub)
    @include('categories.subcategories', ['cat' => $sub, 'dashes' => $newDashes])
@endforeach

登录后复制

关键点：

categories/create.blade.php 是主视图，它循环遍历顶级分类，并包含递归组件 categories/subcategories.blade.php 来显示子分类。
<select name="categories[]" class="form-control" multiple> 使用 multiple 属性允许用户选择多个选项。 categories[] 确保以数组形式传递所选 ID。
categories/subcategories.blade.php 是一个递归组件，它接收一个分类对象和一个缩进字符串作为参数，并显示分类的名称和子分类。
@include('categories.subcategories', ['cat' => $sub, 'dashes' => $newDashes]) 递归调用自身，以显示更深层次的子分类。
{{ route('categories.store') }} 确保表单提交到正确的路由。

路由 (Route)

最后，我们需要定义路由来处理表单提交。

Route::get('/categories/create', [CategoryController::class, 'create'])->name('categories.create');
Route::post('/categories/store', [CategoryController::class, 'store'])->name('categories.store');

登录后复制

关键点：