先生と生徒の会話形式で理解しよう

生徒

「先生、Laravelでセレクトボックスを作りたいんですけど、選択肢を動的に生成する方法はありますか？」

先生

「もちろんできます。データベースの情報や配列から動的に選択肢を作って、Bladeテンプレートで表示する方法があります。」

生徒

「動的に作ると、ユーザーが選んだ値をどうやって取得するんですか？」

先生

「ControllerでRequestオブジェクトを使って、input()で受け取ります。選択肢の値がそのまま取得できるので簡単です。」

1. Bladeでセレクトボックスを作る

まずは静的なセレクトボックスの例です。セレクトボックスとは、ユーザーが複数の選択肢から1つを選べるフォーム部品です。


<form action="{{ route('form.submit') }}" method="POST">
    @csrf
    <select name="fruit" class="form-select">
        <option value="">選択してください</option>
        <option value="りんご" {{ old('fruit') == 'りんご' ? 'selected' : '' }}>りんご</option>
        <option value="みかん" {{ old('fruit') == 'みかん' ? 'selected' : '' }}>みかん</option>
        <option value="バナナ" {{ old('fruit') == 'バナナ' ? 'selected' : '' }}>バナナ</option>
    </select>
    <button type="submit" class="btn btn-primary mt-2">送信</button>
</form>

ここでold('fruit')を使うことで、バリデーションエラー時にユーザーの選択を保持できます。

2. 配列やデータベースから動的に選択肢を生成する

動的生成では、配列やデータベースのデータをループで回して


@php
$fruits = ['りんご', 'みかん', 'バナナ', 'ぶどう'];
@endphp

<select name="fruit" class="form-select">
    <option value="">選択してください</option>
    @foreach ($fruits as $fruit)
        <option value="{{ $fruit }}" {{ old('fruit') == $fruit ? 'selected' : '' }}>{{ $fruit }}</option>
    @endforeach
</select>

ループ処理@foreachを使って、配列の要素を1つずつ

3. Controllerで選択値を受け取る

ControllerではRequestオブジェクトを使って値を受け取ります。


public function submit(Request $request)
{
    $request->validate([
        'fruit' => 'required|string',
    ]);

    $selectedFruit = $request->input('fruit'); // 選択された値を取得
}

バリデーションを行うことで、未選択の場合にエラーを返すこともできます。

4. データベースから選択肢を生成する場合

例えば、fruitsテーブルに登録されている果物をセレクトボックスに表示する場合です。


// Controller
public function create()
{
    $fruits = \App\Models\Fruit::all(); // データベースから取得
    return view('form.create', compact('fruits'));
}


<select name="fruit" class="form-select">
    <option value="">選択してください</option>
    @foreach ($fruits as $fruit)
        <option value="{{ $fruit->id }}" {{ old('fruit') == $fruit->id ? 'selected' : '' }}>
            {{ $fruit->name }}
        </option>
    @endforeach
</select>

これでデータベースの内容が自動でセレクトボックスに反映されます。