【Ruby on Rails】Webpackerにselect2導入メモ

jQuery Ruby on Rails

Posted by Yuto Yasunaga at 2020-09-19 20:37:18 +0900
Qiitaで見る >>>

jQuery導入

select2を使う為に、jQueryが必要です。

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