はじめに

jQuery Select2 で、選択肢に存在しない情報を動的に追加する方法を調べた。

ユーザー入力で一致する選択肢がある場合は既存選択肢を、そうでなければユーザー入力をそのまま選択肢として追加する、というイメージ。

TL;DR

• tags: true を指定すると選択肢を動的に追加できる
• createTag で選択肢追加時の挙動を制御できる
• multiple の場合は複数選択しを追加できる

目次

1. はじめに
2. TL;DR
3. 環境・条件
4. 詳細
   1. 動作イメージ
   2. tags(single)
   3. tags(multiple)
   4. createTag で追加情報の制御
   5. tokenSeparators で選択肢追加キーの設定
5. まとめ
6. 参考文献

環境・条件

• jquery v3.4.1 (CDN)
• select2 v4.0.12 (CDN: JS, CSS)

詳細

tags オプションを使うことで、動的に選択肢を追加できる

参考: Dynamic option creation | Select2

動作イメージ

See the Pen select2 dynamic option creattion sample by 17num (@17num) on CodePen.

tags(single)

tags: true で指定するだけで良い。

1
2
3

$("select.select2").select2({
  tags: true,
});

ユーザー入力で候補を絞り込んで、「存在するものであれば既存選択肢を使用」「存在しなければ選択肢を追加」という挙動になる。

ちなみにデフォルトだと以下のように value=<user input> の <option> が追加される。

1
2
3
4
5
6
7
8

<select>
  <!-- apple, banana, cherry は既存選択肢 -->
  <option value="a">apple</option>
  <option value="b">banana</option>
  <option value="c">cherry</option>
  <!-- りんごと入力→既存選択肢に無いので追加 -->
  <option value="りんご">りんご</option>
</select>

tags(multiple)

tags: true + multiple: true(もしくは <select multiple>)で新規選択肢を複数追加できるようになる。

1
2
3
4

$("select.select2").select2({
  tags: true,
  multiple: true,
});

追加時の挙動は Single の場合と同じ。

1
2
3
4
5
6
7
8
9

<select>
  <!-- apple, banana, cherry は既存選択肢 -->
  <option value="a">apple</option>
  <option value="b">banana</option>
  <option value="c">cherry</option>
  <!-- 既存選択肢に無いので追加 -->
  <option value="りんご">りんご</option>
  <option value="バナナ">バナナ</option>
</select>

createTag で追加情報の制御

createTag オプションで {id: n, text: xxxx} を返却する関数を指定すると、<option value="n">xxxx</option> として選択肢を追加できる。

createTag は選択肢追加時の詳細設定。何も指定しない場合は <option value="banana">banana</option> のように選択肢が追加される。

1
2
3
4
5
6
7
8
9

$("select.dynamic-option-create-createTag").select2({
  tags: true,
  createTag: (params) => {
    return {
      id: params.term.length,
      text: params.term,
    };
  }
});

abcde という入力で選択肢を追加した場合、下記内容で <option> が追加される。

1

<option value="5">abcde</option>

tokenSeparators で選択肢追加キーの設定

tokenSeparators オプションで選択肢の区切り文字を設定できる。

tokenSeparators: [','] で、キー入力が banana, apple, の場合は banana, apple がカンマ(,)を入力した時点で選択肢として追加される。
※multiple 有効なら banana と apple がそれぞれ追加され、そうでなければ(banana は上書きされて)apple が追加された状態となる。

tokenSeparators: [',', ' '] としている場合、半角スペース()入力で選択肢が追加される挙動となるので注意が必要。

1
2
3
4

$("select.dynamic-option-create-createTag").select2({
  tags: true,
  tokenSeparators: [',', ' '],
});

まとめ

• tags: true を指定すると選択肢を動的に追加できる
• createTag で選択肢追加時の挙動を制御できる
• multiple の場合は複数選択しを追加できる

参考文献

• Dynamic option creation | Select2 - The jQuery replacement for select boxes
• javascript - Tagging with AJAX in select2 - Stack Overflow

関連記事

• jQuery Select2 で、初期値の設定と選択状態のクリア
• jQuery Select2 で ajax を使って選択肢を取得する
• jQuery Select2 で上限ありの複数選択
• Lozad.js で Lazy Load (非 jQuery)
• JavaScript で画像をローカルにダウンロード
• JavaScript で複数画像を zip に圧縮してローカルにダウンロード
• JavaScript で URL のクエリパラメータを操作する方法
• axios で添付ファイルありのリクエスト(multipart/form-data の POST)