Select2 セレクト複数選択

Bykhino

Mar 19, 2016 #Select2, #フォーム

今回は人気のドロップダウンスクリプト、Select2を紹介します。

通常のドロップダウンリストは、

<div class="form-group{{ $errors->has('category') ? ' has-error' : '' }}">
    <label class="col-md-4 control-label">分類</label>

    <div class="col-md-6">
        {!! Form::select('category', ['犬', '猫', '猿'], null, ['class' => 'form-control']) !!}
    </div>
</div>

とテンプレートで指定すると、

と表示。

これに、

<div class="form-group{{ $errors->has('category') ? ' has-error' : '' }}">
    <label class="col-md-4 control-label">分類</label>

    <div class="col-md-6">
        {!! Form::select('category[]', ['犬', '猫', '猿'], null, ['class' => 'form-control', 'multiple' => 'multiple']) !!}
    </div>
</div>

と'multiple' => 'multiple'を追加すると、

と複数選択に変わります。

しかし、この複数選択にSelect2を使用すれば、

のように、ドロップダウンから複数選択して、最初の行に選択した値を表示してくれます。また、そこでXをクリックすることで削除もできます。

必要な設定は、

まず、

https://github.com/select2/select2/archive/master.zip

よりダウンロードして解凍してから、レイアウトのテンプレートを以下のように編集します。

...
<head>
...
<link href="{{ url('assets/css/select2/select2.min.css') }}" rel="stylesheet" type="text/css">
...
</head>
<body>
...

<script src="{{ url('assets/js/select2/select2.min.js') }}"></script>
<script src="{{ url('assets/js/select2/ja.js') }}"></script>

<script type="text/javascript">
      $(document).ready(function() {
          $(".js-multiple").select2({ width: 'resolve' });
      });
</script>
...

そして、画面のテンプレートを、

<div class="form-group{{ $errors->has('category') ? ' has-error' : '' }}">
    <label class="col-md-4 control-label">分類</label>

    <div class="col-md-6">
        {!! Form::select('category[]', ['犬', '猫', '猿'], null, ['class' => 'form-control js-multiple', 'multiple' => 'multiple']) !!}
    </div>
</div>

と編集します。

Select２には他にもいろいろな機能があります。

https://select2.github.io/examples.html