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”;

Thank you for reading this post, don't forget to subscribe!

<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’);