Laravelでセレクトボックスを実装する方法【現役エンジニアが解説】

PROGRAM

今回は、Laravelでセレクトボックスを実装する方法について、簡単に解説していきます。

①Laravel Collectiveのインストール

Laravel CollectiveのFormファサードを使うとHTML実装時、非常に便利です。

Laravel CollectiveのFormファサードでセレクトボックスも楽に実装できます。

composer require laravelcollective/html

上記のcomposerコマンドを実行すると、Laravel CollectiveのFormファサードが使えるようになります。

②Bladeでの基本的な使い方

Laravel CollectiveのFormファサードのセレクトボックスの使い方はシンプルです。

{{Form::select('fruit', ['Apple', 'Banana', 'Grape'])}}
<select name="fruit">
	<option value="0">Apple</option>
	<option value="1">Banana</option>
	<option value="2">Grape</option>
</select>

Bladeで上記のように、Formファサードのselectメソッドを使って要素を設定します。

{{Form::select('fruit', ['apple' => 'Apple', 'banana' => 'Banana', 'grape' => 'Grape'])}}
<select name="fruit">
	<option value="apple">Apple</option>
	<option value="banana">Banana</option>
	<option value="grape">Grape</option>
</select>

一方で、valueも設定する場合には、配列を設定したところを、連想配列に変えるだけです。

③Bladeでのオプション設定

Laravel CollectiveのFormファサードのselectメソッドでは引数を4つ指定できます。

セレクトボックスに関して、第一引数がname属性の値、第二引数がoption要素の設定、第三引数が選択状態の設定、第四引数が追加属性の設定となります。

{{Form::select('fruit', ['apple' => 'Apple', 'banana' => 'Banana', 'grape' => 'Grape'], 'banana', ['class' => 'form-control','id' => 'fruit'])}}
<select class="form-control" id="fruit" name="fruit">
	<option value="apple">Apple</option>
	<option value="banana" selected="selected">Banana</option>
	<option value="grape">Grape</option>
</select>

上記の例では、class属性をform-control、id属性をfruit、name属性をfruit、option要素をApple(apple)とBanana(banana)、Grape(grape)、Bananaを選択状態にしています。