jQueryのselect2を導入することで複数選択可能な、セレクトボックスを簡単に実装することができます。また、セレクトボックス内の検索も可能なので、項目が多い場合は便利です。今回はrailsのライブラリとして、gem “select2-rails”がありましたので、導入いたします。
Select2 for rails asset pipeline
https://github.com/argerim/select2-rails
環境はこちらです
|
1 2 3 4 |
ruby 2.4.0 rails 5.1.6 select2-rails 4.0.3 jquery-rails 4.3.3 |
select2-railsのインストール
|
1 |
gem "select2-rails" |
|
1 |
$ bundle install |
app/assets/javascripts/application.js
|
1 |
//= require select2 |
app/assets/stylesheets/application.scss
|
1 |
*= require select2 |
モデルにサンプルデータを定義
本記事のサンプルデータはintegerのprefecture_codeをenumで用意しています。
app/models/user.rb
|
1 2 3 4 5 6 7 8 |
enum prefecture_code: { 北海道:0,青森県:1,岩手県:2,宮城県:3,秋田県:4,山形県:5,福島県:6, 茨城県:7,栃木県:8,群馬県:9,埼玉県:10,千葉県:11,東京都:12,神奈川県:13, 新潟県:14,富山県:15,石川県:16,福井県:17,山梨県:18,長野県:19, 岐阜県:20,静岡県:21,愛知県:22,三重県:23, 滋賀県:24,京都府:25,大阪府:26,兵庫県:27,奈良県:28,和歌山県:29, 鳥取県:30,島根県:31,岡山県:32,広島県:33,山口県:34, 徳島県:35,香川県:36,愛媛県:37,高知県:38, 福岡県:39,佐賀県:40,長崎県:41,熊本県:42,大分県:43,宮崎県:44,鹿児島県:45,沖縄県:46 } |
ビューでセレクトボックスの作成
本記事ではsimple_formを使ってセレクトボックスを作成しています。
app/views/users/_form.html.erb
|
1 |
<%= f.input :prefecture_code, include_blank: '選択して下さい', input_html: {class: 'mySelect2'} %> |
jqueryは以下の記述だけで検索可能なセレクトボックスができます。
app/assets/javascripts/select2.js
|
1 2 3 |
$(document).ready(function() { $('.mySelect2').select2(); }); |
また、multiple: trueを指定することで複数選択可能になります。
app/views/users/_form.html.erb
|
1 |
<%= f.input :prefecture_code, include_blank: false, input_html: {multiple: true, class: 'mySelect2'} %> |
オプションの設定
オプションはこちらを参考に設定することができます。
app/assets/javascripts/select2.js
|
1 2 3 4 5 6 7 8 |
$(document).ready(function() { $('.mySelect2').select2({ maximumSelectionLength: 3, width: 300, placeholder: 'This is my placeholder', allowClear: true # default: true }); }); |
ブートストラップ テーマを利用する場合
bootstrapを使用している場合はテーマを使うことができます。
app/assets/stylesheets/application.scss
|
1 |
*= require select2-bootstrap |
app/assets/javascripts/select2.js
|
1 2 3 4 5 |
$(document).ready(function() { $('.mySelect2').select2({ theme: "bootstrap" }); }); |
以上です！ご覧いただき、ありがとうございました！！
