はじめに

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 有効なら bananaapple がそれぞれ追加され、そうでなければ(banana は上書きされて)apple が追加された状態となる。

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

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

まとめ

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

参考文献

関連記事