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

Select2で初期値を設定する方法をサンプルコード付き解説します。セレクトボックスにて初期値を選択したいという時がよくあります。そこでSelect2においてjQueryのコードを用いて、初期値を選択できるようにする方法を解説します。

コンテンツ [表示]

  1. 1Select2で初期値を設定したい
  2. 2Select2で初期値を設定する方法
  3. 2.1シンプルに初期値を設定する方法
  4. 2.2複数の初期値を設定する方法
  5. 3まとめ

Select2で初期値を設定したい

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

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

Photo byFree-Photos

Select2で初期値を設定する方法

では以下の項目で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で初期値を設定してみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。