Select2で初期値を設定する方法をサンプルコード付き解説！

Select2を用いてセレクトボックスにて初期値を自ら選択したいという時がよくあります。

そこでSelect2において今回はselected属性を用いず、jQueryのコードを用いて初期値を自ら選択できるようにする方法を解説します。

では以下の項目でSelect2で初期値を選択する方法について解説します。

まずシンプルに初期値を選択する方法について解説します。

初期値を選択するためには、シンプルなSelect2の使い方に加えて、jQueryにコードを追記します。

ではサンプルコードで実際に挙動を確認してみましょう。

このように「Qumeru1」ではなく、「Qumeru4」が初期値として選択されていることが分かります。

jQueryに追記したコードとしては、select要素のクラス属性の名前に、初期値に設定したいoption要素のvalue値、そしてtrigger("change")を繋げた形になっています。

では複数の初期値を設定する方法について解説します。

こちらはシンプルなselect要素の使い方に加え、multiple属性を追記します。

ではサンプルコードで実際に挙動を確認してみましょう。

このようにselect要素にmultiple属性がつくことで複数の初期値が設定されていることが分かります。

jQueryのコードとして1つ目のサンプルコードと違う点は、初期値に設定したいoption要素のvalue値を配列の形で複数渡しているという点です。

補足として初期値をクリアする方法について解説します。

早速ですがサンプルコードで実際に挙動を確認してみましょう。

「クリア」ボタンを押すと初期値が消えることが分かります。

jQueryのコードとしては、まず初期値を消すためにclearOption機能を作成します。

clearOption機能では初期値に何も設定されなくなるようにvalue値をnullにしています。

そして「クリア」ボタンを押した時にclearOption機能が働くように設定しています。

いかがでしたでしょうか？

ぜひここで紹介した方法を用いて、Select2で初期値を設定してみてください。