Rails6 select2 導入

$ yarn add tempusdominus-bootstrap-4
$ yarn add jquery
$ yarn add jquery-ui
$ yarn add select2

・app/javascript/packs/application.js
require('jquery')
require('jquery-ui')
import 'bootstrap'
import "../stylesheets/application"
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/menu.css';
import 'jquery-ui/themes/base/autocomplete.css';
import 'jquery-ui/themes/base/theme.css';
import 'select2/dist/css/select2.css';


・app/javascript/stylesheets/application.scss
@import 'bootstrap';
@import "~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4";


<select id="multiple" class="multiple" multiple="multiple">
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
<option value="value5">value5</option>
</select>


$(function () {
$('#multiple').select2({
placeholder: 'Please Select',
allowClear: true,
dropdownAutoWidth: true,
width: 'auto',
multiple: true
})
});

解除する場合は
$('#multiple').val(null).trigger('change');

Comment Form

コメントを表示する前に、管理人の承認が必要になることがあります。その場合は、承認されるまでコメントは表示されませんので、ご了承ください。

スタイル用のHTMLタグが使えます

Trackback

Recent entry

Search

Tag Cloud

Page Top