【Rails5】Select2で複数選択可能なセレクトボックスを作る

rails multi select2 jquery

jQueryのselect2を導入することで複数選択可能な、セレクトボックスを簡単に実装することができます。また、セレクトボックス内の検索も可能なので、項目が多い場合は便利です。今回はrailsのライブラリとして、gem “select2-rails”がありましたので、導入いたします。

Select2 for rails asset pipeline
https://github.com/argerim/select2-rails

環境はこちらです

select2-railsのインストール

app/assets/javascripts/application.js

app/assets/stylesheets/application.scss

モデルにサンプルデータを定義

本記事のサンプルデータはintegerのprefecture_codeをenumで用意しています。

app/models/user.rb

ビューでセレクトボックスの作成

本記事ではsimple_formを使ってセレクトボックスを作成しています。

app/views/users/_form.html.erb

jqueryは以下の記述だけで検索可能なセレクトボックスができます。

app/assets/javascripts/select2.js

また、multiple: trueを指定することで複数選択可能になります。

app/views/users/_form.html.erb

オプションの設定

オプションはこちらを参考に設定することができます。

app/assets/javascripts/select2.js

ブートストラップ テーマを利用する場合

bootstrapを使用している場合はテーマを使うことができます。

app/assets/stylesheets/application.scss

app/assets/javascripts/select2.js

以上です!ご覧いただき、ありがとうございました!!


投稿者:

Shuji

読書したり、プログラミングしたりしています。何かアウトプットできそうなものがあれば投稿していきたいと思います。