BOKUのブログ

ジャンルにこだわらず、ノートの感じで書いてます

トップ > archive(WEB・PHP) > はじめてLaravel6.0：単一SELECT（プルダウン）とマルチSELECT項目／入力画面

はじめてLaravel6.0：単一SELECT（プルダウン）とマルチSELECT項目／入力画面

archive(WEB・PHP)

f:id:arakan_no_boku:20191003220222p:plain

目次

今回は、入力画面でよく使う部品である、SELECTについて整理します。

Formファサードはとりあえず使わない

Laravelには「Formファサード」があります。

これは標準インストールには含まれません。

別途インストールすれば使えます。

それを使えば、例えば、SELECTならこんな感じで書けます。

{{Form::select('size', ['L' => 'Lサイズ', 'S' => 'Sサイズ'], 'S', ['placeholder' => 'null'])}}

便利そうには見えますが、今回は使いません。

理由は「依存するのが怖い気がするから」です。

最新では標準に含まれていないけど、以前は標準に含まれていた・・というパターンの機能に依存して、後で後悔する・・パターンは、さんざん体験してきましたから。

 

べた書きで画面イメージを確認するサンプル

blade.phpファイルだけ編集して、画面表示から確認します。

まずはベタ書きで。

単一選択のSELECT（プルダウン）
<div class="form-group row">
   <label for="sel01" class="col-md-4 col-form-label text-md-right">性別</label>
   <div class="col-md-6">
      <select class="form-control" id="sel01" name="sel01">
         <option value="1">男性</option>
         <option value="2" selected>女性</option>
      </select>
   </div>
</div>

表示すると、こうなります。 

f:id:arakan_no_boku:20191104131700p:plain

複数選択のSELECT
<div class="form-group row">
   <label for="sel02" class="col-md-4 col-form-label text-md-right">選択言語</label>
   <div class="col-md-6">
      <select  multiple　class="form-control" id="sel02" name="sel02[]">
         <option value="ja" selected>日本語</option>
         <option value="en">英語</option>
         <option value="de">ドイツ語</option>
         <option value="zh">中国語</option>
      </select>
   </div>
</div>

表示するとこうなります。

f:id:arakan_no_boku:20191104131939p:plain

単一SELECTとことなり、注意することがひとつ。

  <select multiple　class="form-control" id="sel02" name="sel02[]">

この部分の「name="sel02[]"」のように、multipleの場合は、nameを配列で定義しておく必要があることです。

こうしておかないと、複数選択された結果をコントローラ側で配列で受け取ることができず、一番最後に選択された値のみになってしまします。

 
選択値をコントローラで受け取るサンプル

nameを設定しているので、Requestクラスオブジェクトで、選択値を受け取れます。

public function store(Request $request)
{

    $sel01 = $request->sel01;
    $sel02 = $request->sel02; 

}

この各変数に何がはいっているか？です。

まず、単一選択の$sel01には"1"または"2"など、選択されたoptionのvalue値です。

複数選択の$sel02は、選択されたoptionのValue値が配列ではいってきます。

なので、大抵の場合「implode」関数などを使って

$sel02ForSave = implode(',', $sel02)

のようにして「ja,de,en」のような選択されたValue値をカンマつなぎのテキストに変換してDBに保存したりします。

 

コントローラクラスで初期値をセットするサンプル。

DBからデータを読み込んだ・・体で、コントローラクラスから初期値をわたして表示するケースです。

Http\Controllers\DummyController.php

public function index()
{ 
    $sel01Mock = "2";
    $sel01Datas = [
        "1" => "男性",
        "2" => "女性"
    ];
    $sel01Selected = [
        "1" => "",
        "2" => ""
    ];
        $sel01Selected[$sel01Mock] = "selected";
        
    $sel02Mock = preg_split("/,/", "en,zh");
    print_r($sel02Mock);
    $sel02Datas = [
        "ja" => "日本語",
        "en" => "英語",
        "de" => "ドイツ語",
        "zh" => "中国語"
    ];
    $sel02Selected = [
        "ja" => "",
        "en" => "",
        "de" => "",
        "zh" => ""
    ];
    foreach ($sel02Mock as $key => $val) {
        $sel02Selected[$val] = "selected";
    }
    return view('dummy', compact(
        'sel01Datas',
        'sel01Selected',
        'sel02Datas',
        'sel02Selected'
    ));
}

単一SELECTと複数SELECTの両方共、コントローラでoptionの選択肢と、初期選択状態（selected）をセットしてます。

補足していきます。

単一SELECT

こちらの「DBから取得した体」は「$sel01Mock = "2";」です。

前半の例のとおり、コントローラクラスではRequestオブジェクトから、選択された「Value値」が取得できますから、DBに保存するとしたら、その値です。

つまり、"2"の女性が選択されていたものを保存して、DBから取得した想定です。

データと同じキーで「 $sel02Selected」配列を用意して、$sel01Mockの値をキーにして「selected」をセットするわけです。

複数SELECT

こちらの「DBから取得した体」は「$sel02Mock = preg_split("/,/", "en,zh");」です。

前半の例で、Multipleの場合は選択されたValue値が配列でわたってくるので、DBに保存するときには「カンマつなぎ」の文字列にして保存すると書きました。

こちらの例はその想定で、enとzhが選択されてDBに保存されていたものを読み出し、カンマで分割して、配列に戻しているわけです。

なので。

foreach ($sel02Mock as $key => $val) {
    $sel02Selected[$val] = "selected";
}

 こんな感じで、$sel02Selected配列を用意して、配列の値をキーにして「selected」をセットすれば良いわけです。

 

Bladeテンプレート側で配列変数を処理するサンプル

上記のコントローラで設定し受け渡した配列変数を処理するVIEW側です。

単一SELECT
<div class="form-group row">
   <label for="sel01" class="col-md-4 col-form-label text-md-right">性別</label>
   <div class="col-md-6">
      <select class="form-control" id="sel01" name="sel01">
         @foreach($sel01Datas as $key01 => $val01)
            <option value="{{$key01}}"
               @if(empty(old())) {{ $sel01Selected[$key01] }}
               @elseif(old('sel01')==$key01) selected
               @endif
            >{{$val01}}</option>
         @endforeach
      </select>
   </div>
</div>

SELECTのプルダウンリストに出力する表示項目情報は以下のループで取り出します。

 @foreach($sel01Datas as $key01 => $val01)

ここで、$sel01Datasにはコントローラで

$sel01Datas = [ "1" => "男性", "2" => "女性" ];

のようにセットされているので、それを１セットずつ取り出して＜option>タグを組み立てればよいわけです。

でも。

それだけでは初期表示時に明示的に「選択された状態」にすることはできません。

選択された状態にするポイントは、以下の@if～　@endifの部分です。 

@if(empty(old())) {{ $sel01Selected[$key01] }}
@elseif(old('sel01')==$key01) selected
@endif 

表示するケースとして

  • 初期表示時にSELECTED（選択状態）にする。
  • バリデーションエラーで戻った時に直前の選択状態を復元する 

 の２つがあります。

初期表示時は「old()」が空（empty）になりますから、それを利用して。

@if(empty(old())) {{ $sel01Selected[$key01] }}

 で、コントローラでセットした「SELECTED」文字列を適用する・しないで制御することができます。

逆に、バリデーションエラーで戻った時は「old('sel01')」で直前に選択されていたValue値が取得できますから、それと一致するものに「SELECTED」をつけることで復元することができます。

マルチSELECT

マルチSELECTの場合も理屈は同じです。

ただ、SELECTEDになる項目が１つではないので、そこだけ配慮がいります。

ソースはこんな感じです。

<div class="form-group row">
   <label for="sel02" class="col-md-4 col-form-label text-md-right">選択言語</label>
   <div class="col-md-6">
       <select  multiple　class="form-control" id="sel02" name="sel02[]">
           @foreach($sel02Datas as $key02 => $val02)
              <option value="{{$key02}}"
                 @if(empty(old())) {{$sel02Selected[$key02]}}
                 @elseif(in_array($key02,old('sel02'))) selected
                 @endif
              >{{$val02}}</option>
           @endforeach
      </select>
   </div>
</div>

表示項目のセットや、初期表示字のSELECTED（選択状態）の指定はほぼ同じです。 

ただ。

@if(empty(old())) {{$sel02Selected[$key02]}}
@elseif(in_array($key02,old('sel02'))) selected
@endif

の「バリデーションエラーで戻った場合の直前の選択状態の復元」時、「 old('sel02')」で返されるのは「配列」であるという点が違います。

そのため単純に「＝＝」などで比較はできません。

PHP関数の「in_array()」を使って、$key02の値が「 old('sel02')」で返される配列に含まれているかどうかで判断して、SELECTEDをつけています。

実行イメージ

MariaDB（MySQL）を起動し、ビルトインサーバーを動かします。

php artisan serve

それで以下のURLで動かしてみます。 

http://localhost:8000/dummy

 初期表示は

f:id:arakan_no_boku:20191106003447p:plain

2種類のSEｌECTで項目表示と初期選択はできています。

これを、「男性」「日本語」「ドイツ語」を選択に変更したうえで、コード・名前・カナを適当に入力して、バリデーションエラーを発生させます。

f:id:arakan_no_boku:20191106003702p:plain

バリデーションエラーの直前の状態が、SELECTでも復元されてます。

OKそうですね。

このパターンを覚えておけば、SELECTはいけそうですね。

今回はこんなところで。

ではでは。