[Ruby on Rails] Webpacker的Select2简介备忘录

jQuery简介

jQuery必须使用select2。

jQuery引入方法

推出select2

终端

1	yarn add select2

app / javascript / packs / application.js

1
2
3
4
5
6
7
8
9

import 'select2'
import 'select2/dist/css/select2.css'

document.addEventListener('turbolinks:load', () => {
$('.js-select').select2({
placeholder: 'Select an option',
allowClear: true
})
})

定制风格

ass

1
2
3
4
5
6
7
8
9
10
11
12
13

$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

您已成功将select2引入到Ruby on Rails应用程序中。
如果将js-select类添加到select标记，则它应该起作用。