6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

select2 v4で日本語対応してtagsのバグを回避した方法(根治ではない

Last updated at Posted at 2020-02-03

#select2 v4で日本語対応してtagsのバグをたまたま回避した

他に情報が出ないので同士の時間を溶かさないようにメモしておく。

##select2で要素を自動追加したかったので、tags:true にしたらバグ発生した。

「バッグ」と入力したら、「ばggう」となってしまう。

ちょっと調べると、chrome特有の現象とか?

解決した人が、ruby gemでインストールしたら解決したとか。
https://masayuki031.com/2019/06/23/select2-rails/

なんだそりゃって思って見たら、select2の4.0.1.1が入ってる。

というわけで、バージョン疑って下げていったら、4.0.2までバグ発生しない。4.0.3でバグ発生する。

#結論。ver4.0.2を使おう。
以上、解散。

下記は、ねんのため tags:true で動く例。(どこかのコピペをバージョンだけ変更

<!-- Select2.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Select2本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<!-- Select2日本語化 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/i18n/ja.js"></script>
<script>
$(function() {
  $('.test-select2').select2({
    language: "ja",
    tags: true
  });
	//tagsを使うと、4.0.3以降はバグる
})
</script>
<style>
.test-select2 {
  width: 50%;
}
</style>
<select class="test-select2" multiple="multiple">
<option>リンゴ</option>
<option>ゴリラ</option>
<option>ラッパ</option>
</select>
6
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?