3.4.1Select2はjQueryのプラグインで、<select>要素のドロップダウンリストにさまざまな表現や機能が加えられます。簡単な作例で、設定と操作の仕方についてご説明します。<select>要素の標準のドロップダウンリストまずは、<select>要素で標準のドロップダウンリストをつくってみましょう。つぎのようにid属性(demo)が与えられた要素に、<option>要素でリスト項目を加えます。空の<span>要素(id属性selectedId)には、あとでスクリプトにより選択項目の番号を加えるつもりです。value="2">Angular</option></select></div>これでHTMLドキュメントには標準のドロップダウンリストが表示されます(図001)。selected属性を与えた<option>要素がはじめに選ばれているはずです。<style>要素には以下のコード001のスタイルを定めました。300px;}このあとプラグインを使いますので、jQueryは読み込んでおきましょう。ここではCDNを利用することにします。src="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>リストから選んだ項目の値(value属性)を、JavaScriptコードでページに表示します。<select>要素(id属性demo)のjQueryセレクタに.on()メソッドで定めるのはchangeイベントのリスナーです。リスナー関数が引数に受け取るイベントオブジェクトのtargetプロパティで選ばれた要素が得られますので、valueプロパティの値を取り出します。それを目的の要素(id属性selectedId')に.text()メソッドで引数に与えれば、値がテキストとして加えられるのです。選んでおく項目も、スクリプトで定めることにしましょう。.val()メソッドで要素のvalueプロパティの値が与えられます。trigger()メソッドでchangeイベントのリスナー関数を呼び出せば、選択値が表示されるのです。HTMLコードからは<option>要素のselected属性は除いて構いません。これで、ドロップダウンリストから選んだ項目の値がページに示されます(サンプル001)。Select2を読み込んで実行するSelect2プラグインのインストールは、「Installation」のページに説明があります(図002)。JavaScriptライブラリのほか、CSSも読み込まなければなりません。紹介されているのは、CDNとBowerおよびマニュアルのインストールの仕方です。図002■Select2の「Installation」のページここでは、CDNを用いることします。CDN」の項にはHTMLコードの記述があり、コピーボタンでコピーできます。プラグインのライブラリは、jQueyのあとに読み込まなければなりません。これでドロップダウンリストは、Select2のスタイルになります(図003)。{$('#demo').select2()});図003■Select2のドロップダウンリストリスト先頭のテキストフィールドは検索ボックスです(図004)。入力すると、リストがテキストを含む項目に絞られます。リスト項目をデータから動的に加えるリスト項目は予めHTMLコードに<option>要素で書いておかなくても、select2()メソッドで動的に加えられます。そこで、<select>要素から項目の<option>要素は、すべて除いてしまいましょう。value="2">Angular</option>--></select>項目のデータは、配列にオブジェクトで納めます(「Arrays」参照)。プロパティとして定めるのは、idとtextのふたつです。idが項目の値、textはリストに示されるテキストです。データの配列は、select2()メソッドに渡す引数のオブジェクトにプロパティdataとして与えます。data})});これで、Select2のドロップダウンリストにデータから項目が動的に加えられました。JavaScriptコードとHTMLの記述は、つぎのコード002にまとめたとおりです。実際の動きは、CodePenに掲げたサンプル002でお確かめください。複数選択リスト<select>要素にmultiple属性を与えると、項目が複数選べるようになります。このリストでは、予め項目を撰択しておくのは止めましょう(もちろん選んでおくことも可能です)。あとの都合を考えて、<select>要素のjQueryセレクタは変数(select)にとっておきます。Select2が定める複数撰択リストは「pillbox」と呼ばれるスタイルです(図005)。標準のリストボックスのように特別なキー([command]/[Ctrl])を押すことなく、クリックで項目が撰択できます。一度リストの項目をクリックするか、選んだ項目の[x]ボタンを押せば削除です。選んだ項目の番号を示す前掲コード001で扱ったのは単一項目のドロップダウンリストでした。したがって、撰択した項目として示す番号はつねにひとつです。複数撰択リストでは、複数の項目が選ばれるかもしれません。changeイベントのリスナー関数は書き直さなければならないのです。method」参照)。番号は項目オブジェクトのidプロパティでした。Array.map()メソッドを用いれば番号の配列がつくれるでしょう。Array.join()メソッドで、番号をカンマ区切りの文字列に替えられます。'));});これでSelect2の複数撰択リストで、選ばれた項目の番号を示すことができます。JavaScriptコードとHTMLの記述は、つぎのコード003のとおりです。以下のサンプル003にCodePenのコードを掲げました。Select2のイベントには、項目を撰択したときのselect2:selectと削除した時のselect2:unselectもあり、ふたつの場合の処理を分けて定められます。最新情報に合わせて本文を加筆・補正。サンプルはCodePenに差し替えた。