人気のPHP WEBアプリケーションフレームワークLaravelのTipsを記録していきます

LaravelのBladeでドロップダウンリストを簡単に作成する

laravelcollective/html を使用してドロップダウンリスト( select, option リスト) を簡単に作成します。

● laravelcollective/html のインストール

https://laravelcollective.com/docs/master/html

composer require "laravelcollective/html":"^5.4.0"

● ベタがきでドロップダウンリストを生成する

@php
    $job_name_loop = [
        ''      => '選択してください' ,
        '公務員' => '公務員' ,
        '医師'   => '医師' ,
        '弁護士' => '弁護士' ,
    ];
@endphp
{{ Form::select('job_name', $job_name_loop, old('job_name'), ['class' => 'my_class']) }}

● ドロップダウンリストの配列を取得する

モデルから一覧を取得してきて、それを (key/value)方式に変換します。
コントローラーの好きなところに以下を記述します。

$clients = Client::select('id', 'client_name')->get();

// key,value ペアに直す
$client_id_loop = $clients->pluck('client_name','id');

● LaraelのBladeテンプレートにデータを渡す

return view('projects.create', compact('client_id_loop') );

● Bladeテンプレート内で Form::select を呼び出す

フォーム名「FORM_NAME」  CSSクラス名「my_class」 なドロップダウンリストを生成します。

{{ Form::select('FORM_NAME', $client_id_loop, null, ['class' => 'my_class']) }}

次のようなドロップダウンリストが生成されます

<select class="my_class" name="FORM_NAME">
    <option value="1">テスト1</option>
    <option value="2">テスト2</option>
    <option value="3">テスト3</option>
</select>

● ↑ こんなめんどくさいことをせずに Bladeのビューに1行で記述する

一撃で記述したい場合はこのように記述します。
bladeテンプレート内に記述
3つ目の引数に値を渡すと選択済みになります。null を渡すと最初の項目が選択済みになります

{{ Form::select('FORM_NAME', \App\Client::select('id', 'client_name')->get()->pluck('client_name','id')->prepend( "選択してください", ""), null, ['class' => 'form-control']) }}

● 値をを選択済み(selected)のドロップダウンリストを生成する

3つめの引数に値をセットすると selected になります

{{ Form::select('FORM_NAME', $client_id_loop, 2, ['class' => 'my_class']) }}

 ↓ 次のようなドロップダウンリストが生成されます

<select class="my_class" name="FORM_NAME">
    <option value="1">テスト1</option>
    <option value="2" selected="selected">テスト2</option>
    <option value="3">テスト3</option>
</select>

●ドロップダウンリストに「選択してください」項目を追加する

key が null の値を登録します。

{{ Form::select('FORM_NAME',  [null=>'選択してください']+$client_id_loop, 2, ['class' => 'my_class']) }}

または prepend() メソッドを使って先頭に追加します。
prepend() メソッドを使用するときは 空文字 "" を使用します。( null を渡すと 連想配列から普通の配列になります。)

{{ Form::select('FORM_NAME', \App\Client::select('id', 'client_name')->get()->pluck('client_name','id')->prepend( "選択してください", ""), null, ['class' => 'form-control']) }}

 ↓ 次のようなドロップダウンリストが生成されます

<select class="my_class" name="FORM_NAME">
    <option value="">選択してください</option>
    <option value="1">テスト1</option>
    <option value="2" selected="selected">テスト2</option>
    <option value="3">テスト3</option>
</select>

disabled な値を追加するにはこちら
https://goo.gl/cBJVaM

No.1317
05/18 14:57

edit