Rails7でselect2を利用すると「Uncaught TypeError: $(...).select2 is not a function」のエラーが出た時の対応方法
created
updated
目次
jQueryで利用可能なselect2とは
GitHub - select2/select2: Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Getting Started | Select2 - The jQuery replacement for select boxes
Select2は、検索、タグ付け、リモートデータセット、無限スクロール、その他で多くのよく使われるオプションをサポートする、カスタマイズ可能なセレクトボックスが利用可能になるプラグインです。利用には、jQueryが必要となります。
Rails7の環境
CSS
gem 'cssbundling-rails'JavaScript
gem 'jsbundling-rails'コマンド
bundle installpackage.json
yarn add jquery select2 sassselect2を正しい読み込みをしていない場合のエラー内容
Uncaught TypeError: $(...).select2 is not a functionselect2の読み込み方
app/assets/stylesheets/application.scss
// application.scss
@use 'select2/dist/css/select2.css';app/assets/javascript/application.js
// application.js
import select2 from 'select2';
select2();
window.addEventListener('load', () => {
$('.select2').each((i, el) => {
const select = $(el).select2({
// 各オプション
});
// 何かクラスを付与するならば
select.data('select2').$container.addClass("add-class");
});
});これで、select2が利用できるようになると思います。