select2をJQueryでcloneしよう！

今回はselect2についてです。皆さん使ったことありますか？
このツールかなり便利で僕もしょっちゅう使っているのですが、少し変わったことをしようとすると
沼に落ちることがあります。

その沼にはまったときの一例を紹介したいと思います。
皆さんは同じ沼にはまりませんように。

select2をcloneする方法

ソースは以下のとおりです。
コピペで動くはずです。

HTML

javascript

 

これで「クローンする」ボタンを押下するとselectボックスが追加される、
といった動きの画面ができあがります。

select2のクローン時は、まずdestroyを行った後に再度select2関数で初期化する必要があるようです。

と、ここまではネット検索で少し調べれば見つかる方法です。
ただ、僕の場合はこの通りに書いても意図した動作をしてくれませんでした。。

上記の方法でうまくいかなかった方へ

意図した動作にならなかったのはCDNのバージョンによる影響でした。

うまくいかなかったパターン

うまくいったパターン

さて、違いはなんでしょうか。
そうです、script内の@4.0.13を@4.0.0に変更しただけです。

まとめ

答えはシンプルでしたがたどり着くまでになかなか苦労しました。
何はともあれ解決できてよかったよかった。