勉強したことのメモ

webプログラマが勉強したことのメモ。

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

      2022/01/27

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただ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だと直感的に使える上、サジェスト機能付きなのがありがたい。今後も色々な案件で使えそうなので覚えておく。

 - jQuery, JavaScript

  関連記事

javascriptでメモリ開放

今まで考えたこと無かったけどjavascriptを使う際は メモリ消費に気をつけ ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...

javascriptで実行時間の測定

var time_test = function(){ var x = 1; f ...

imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

setTimeoutの注意点

javascriptのsetTimeoutにて変数を用いた際に 想定外の挙動を起 ...

他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...