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だと直感的に使える上、サジェスト機能付きなのがありがたい。今後も色々な案件で使えそうなので覚えておく。
関連記事
-
-
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というサイトでアイ ...