jQuery導入
select2を使う為に、jQueryが必要です。
select2導入
terminal
yarn add select2
app/javascript/packs/application.js
import 'select2' import 'select2/dist/css/select2.css' document.addEventListener('turbolinks:load', () => { $('.js-select').select2({ placeholder: 'Select an option', allowClear: true }) })
カスタマイズスタイル
sass
$select2-height: 38px .select2-container .select2-selection--single height: $select2-height line-height: $select2-height .select2-selection__arrow, .select2-selection__rendered height: $select2-height line-height: $select2-height .select2-search--dropdown .select2-search__field font-size: 16px padding: 4px
以上でRuby on Railsアプリケーションにselect2が導入できました。
select
タグに js-select
クラスを付けたら動くはずです。
Back