formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML5のmultiple属性だとCtrlキーを押しながら選択しないと複数選択できない点があまり好きじゃない。何か良い方法がないか探したところ過去に使用したことがあるselect2が良さそう。以下に実装方法をメモ。

サンプル

・HTML5のmultiple属性バージョン

https://taitan916.info/sample/multi_select/

・select2バージョン

https://taitan916.info/sample/multi_select/index2.php

上記いずれも送信ボタンを押すとどのような形で受け取れるかvar_dumpで出力される。

ソースコード

<form method="post">

    <select id="list" name="list[]">
        <option value="1">選択肢1</option>
        <option value="2">選択肢2</option>
        <option value="3">選択肢3</option>
        <option value="4">選択肢4</option>
        <option value="5">選択肢5</option>
    </select>

    <input type="submit" value="送信">
</form>

<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<script>
$(function(){
    $('#list').select2({
        width: '300px', //セレクトメニューの横幅
        placeholder: '選択してください', //案内文
        allowClear: true,
        multiple: true, //複数選択可能
        maximumSelectionLength: 2, //選択可能件数
        language: {
            maximumSelected: (args) => '最大' + args.maximum + '件まで選択可能です。' //選択可能件数以上に選択しようとした場合に表示されるメッセージ
        }
    });
    //初期値をリセット
    $('#list').val('').trigger('change');

    //初期値を設定したい場合は以下を追記する
    //$('#list').val([1,5]).trigger('change');
});
</script>

「$('#list').val('').trigger('change');」で初期値をリセットしないとセレクトメニューの一番上の値(サンプルの場合だと選択肢1)が選択された状態になる点に注意。初期値を設定したい場合は「$('#list').val([1,5]).trigger('change');」のように記述し「val([1,5])」の部分を適宜変更する。

所感

select2だと直感的に使える上、サジェスト機能付きなのがありがたい。今後も色々な案件で使えそうなので覚えておく。