はじめに

jQuery Select2 で、初期値を設定する方法と、クリアをする方法を調べた。

TL;DR

  • $('#mySelect2').val("val").trigger('change'); で初期化
    • multiple なら $('#mySelect2').val(["val1", "val2", ...]).trigger('change');
  • $('#mySelect2').val(null).trigger('change'); でクリア
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 初期値の設定方法
      1. HTML, JS (single)
      2. HTML, JS (multiple)
    2. クリアする方法
      1. HTML, JS
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

  • Chrome バージョン: 76.0.3809.132（Official Build） （64 ビット）
  • jQuery v3.4.1 (CDN)
  • select2 v4.0.10 (CDN)

詳細

初期値の設定方法

公式 - Selecting options に書かれてる。

1
2
3
4
5
// Single
$('#mySelect2').val("val").trigger('change');

// multiple
$('#mySelect2').val(["val1", "val2", ...]).trigger('change');

HTML, JS (single)

1
2
3
4
5
6
7
8
9
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet">

<select id="mySelect2">
  <option value="apple">apple</option>
  <option value="orange">orange</option>
  <option value="banana">banana</option>
</select>
1
2
3
4
$(document).ready(function() {
  $("#mySelect2").select2({width: "100%"});
  $("#mySelect2").val("orange").trigger("change");
});

See the Pen select2 initialize sample(single) by 17num (@17num) on CodePen.

HTML, JS (multiple)

1
2
3
4
5
6
7
8
9
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet">

<select id="mySelect2" multiple>
  <option value="apple">apple</option>
  <option value="orange">orange</option>
  <option value="banana">banana</option>
</select>
1
2
3
4
$(document).ready(function() {
  $("#mySelect2").select2({width: "100%"});
  $("#mySelect2").val(["orange", "banana"]).trigger("change");
});

See the Pen select2 initialize sample(multiple) by 17num (@17num) on CodePen.

クリアする方法

公式 - Clearing selections に書かれてる。

1
$('#mySelect2').val(null).trigger('change');

multiple でも同じ方法でクリアできる。

HTML, JS

1
2
3
4
5
6
7
8
9
10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet">

<select id="mySelect2">
  <option value="apple">apple</option>
  <option value="orange">orange</option>
  <option value="banana">banana</option>
</select>
<button id="clearSelect2">clear</button>
1
2
3
4
5
6
7
function clearSelectedOptions() {
  $('#mySelect2').val(null).trigger('change');
}
$(document).ready(function() {
  $("#mySelect2").select2({width: "100%"});
  $("#clearSelect2").on("click", clearSelectedOptions);
});

See the Pen select2 clear sample by 17num (@17num) on CodePen.

まとめ

  • $('#mySelect2').val("val").trigger('change'); で初期化
    • multiple なら $('#mySelect2').val(["val1", "val2", ...]).trigger('change');
  • $('#mySelect2').val(null).trigger('change'); でクリア

その他・メモ

通常、クリアする場合には selectedIndex = -1 をしないといけない(っぽい)が、それもやらなくて良い(たぶん select2 の内部でやってくれてる)。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list