はじめに

jQuery Select2 で、複数選択(multiple)を有効にした場合の、最大選択可能数を設定する方法を調べた。

TL;DR

  • $('xx').select2({maximumSelectionLength: n}) で最大選択可能数を設定できる
  • multiple<select multiple> でも、select2({multiple: "multiple"}) でも良い
  • language: maximumSelected でメッセージをカスタマイズできる

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 動作イメージ
    2. 最大選択数の指定: maximumSelectionLength
    3. メッセージの変更: language: maximumSelected
  5. まとめ
  6. 参考文献

環境・条件

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

詳細

動作イメージ

まずはどういうイメージかを載せておく。

See the Pen select2 multiple select with limit sample by 17num (@17num) on CodePen.

最大選択数の指定: maximumSelectionLength

最大選択数は maximumSelectionLength オプションを指定する、初期値は 0(= 制限なし)。

参考: Options | Select2

1
2
3
4
$('.select2').select2({
multiple: "multiple", // <select multiple> でも可
maximumSelectionLength: 2, // 最大2つまで選択可
});

上限まで選択すると以下のようになる。

なお、コメントで書いているが select2({multiple: "multiple"}) としなくても <select multiple> でも良い。

メッセージの変更: language: maximumSelected

デフォルトメッセージを変更したい場合は language: maximumSelected を指定する。

参考: Translation objects - Internationalization | Select2

1
2
3
4
5
6
7
8
9
10
$('.select2').select2({
multiple: "multiple",
maximumSelectionLength: 2,
language: {
maximumSelected: function (args) {
var message = args.maximum + ' 件しかしか選べないよ!';
return message;
},
}
});

こうするとメッセージが以下のようになる。

なお、先ほどの例はアロー関数を使うと以下のようにも書ける。

1
2
3
4
5
6
7
$('.select2').select2({
multiple: "multiple",
maximumSelectionLength: 2,
language: {
maximumSelected: (args) => args.maximum + ' 件しか選べないよ!'
}
});

他に指定できるカスタムメッセージは select2/ja.js - select2/select2 を見ると良い。

ちなみに language: "ja" を指定してみたが、言語設定は変わらなかった。(使い方が間違ってるだけかも)

まとめ

  • $('xx').select2({maximumSelectionLength: n}) で最大選択可能数を設定できる
  • multiple<select multiple> でも、select2({multiple: "multiple"}) でも良い
  • language: maximumSelected でメッセージをカスタマイズできる

参考文献

関連記事