【Rails】selectboxの使い方まとめ
はじめに
RailsのViewでのselectboxの使い方をまとめます。
開発環境
- ruby 2.5.3p105 (2018-10-18 revision 65156) [x86_64-linux]
- Rails 5.2.2
基本形
一番シンプルな形になります。
Comapnyモデルから選択する対象を取得しています。
<div class="field"> <%= form.label :company %> <%= form.select :company, Company.all.map{|t| [t.name, t.id]} %> </div>
下記は、リクエストパラメーターと画面イメージです。
"user"=>{"name"=>"", "company"=>"1"}
画面イメージ
任意項目の場合
selectboxで選択させる要素が、必須項目ではなく、
任意項目にしたい場合は、 include_blankを使用することで、空白を設定できます。
<div class="field"> <%= form.label :company %> <%= form.select :company, Company.all.map{|t| [t.name, t.id]}, include_blank: true %> </div>
下記は、リクエストパラメーターと画面イメージです。
リクエストパラメーター
"user"=>{"name"=>"", "company"=>""}
画面イメージ
選択済みにする場合
初期表示時に、あらかじめ値を選択した状態にするには、下記の方法があります。
- インスタンス変数の対象の値に選択しておきたい値を設定する
- selectedを使用する
ここでは、selectedを使用するケースを記載します。
Companyのidが4のデータを初期表示時に選択済みの状態にします。
<div class="field"> <%= form.label :company %> <%= form.select :company, Company.all.map{|t| [t.name, t.id]}, include_blank: true, selected: 4 %> </div>
下記は、リクエストパラメーターと画面イメージです。
idが4のデータがリクエストされています。
"user"=>{"name"=>"", "company"=>"4"}
画面イメージ
使用不可にする場合
使用不可にする場合は、disabled を使用します。
ここでは、下記の2ケースについて記載します。
- selectboxを使用不可にする
- 項目単位で使用不可にする
selectboxを使用不可にする場合
selectbox自体を使用不可にする場合は、次のように記載します。
<div class="field"> <%= form.label :company %> <%= form.select :company, Company.all.map{|t| [t.name, t.id]}, {}, { disabled: true } %> </div>
画面イメージ
フォーム自体を使用禁止にした場合は、 リクエストは下記のフォーマットになります。
"user"=>{"name"=>""}
項目単位で使用不可にする場合
項目単位で使用不可にする場合は、次のように記載します。
<div class="field"> <%= form.label :company %> <%= form.select :company, Company.all.map{|t| [t.name, t.id]}, disabled: 1 %> </div>
画像イメージ
また、配列を指定して複数の値に対して設定することも可能です。
<div class="field"> <%= form.label :company %> <%= form.select :company, Company.all.map{|t| [t.name, t.id]}, disabled: [1, 2, 3] %> </div>
画面イメージ
複数選択(Select2を使用)
複数値を選択するために、jQueryのselect2を使用するケースを記載します。
select2-railsというgemをここでは使用します。
インストール
下記のgemをインストールします。
gem 'jquery-rails' gem 'select2-rails'
application.js の設定
app\assets\javascripts\application.jsに下記を追加します
- //= require jquery
- //= require jquery_ujs
- //= require select2
追加後は、こちらになります。（上記以外はデフォルトのままです）
//= require jquery //= require jquery_ujs //= require activestorage //= require turbolinks //= require select2 //= require_tree .
application.cssの設定
app\assets\stylesheets\application.cssに
*= require select2を追加します。 （他のものはデフォルトのままです）
*= require select2 *= require_tree . *= require_self
Viewの設定
viewの設定を行います。
javascriptとして、下記のコードを追加します。
「.sample_select2」は対象のクラス名で、複数選択させるため、multiple: trueを設定しています。
$(document).ready(function() { $( ".sample_select2" ).select2({ width: 600, multiple: true }); });
- リクエストの配列から、空文字を削除するためinclude_hidden: falseを設定
- リクエストを配列形式にするために、form.selectにmultiple: trueを設定
追加後のコードは下記になります。
<head> <script> $(document).ready(function() { $( ".sample_select2" ).select2({ width: 600, multiple: true }); }); </script> </head> <%= form_with(model: user, local: true) do |form| %> <% if user.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2> <ul> <% user.errors.full_messages.each do |message| %> <li><%= message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :name %> <%= form.text_field :name %> </div> <br> <div class="field"> <%= form.label :company %> <%= form.select :company, Company.all.map{|t| [t.name, t.id]}, { include_hidden: false }, { class: 'sample_select2', multiple: true } %> </div> <br> <div class="actions"> <%= form.submit %> </div> <% end %>
下記は、リクエストパラメーターと画面イメージです。
"user"=>{"name"=>"", "company"=>["1", "3", "5"]}
画面イメージ
複数項目を選択済みにする場合
select2であれば、初期表示段階で複数項目を選択した状態にできます。
selectedに配列で選択したい値を設定します。
<%= form.select :company, Company.all.map{|t| [t.name, t.id]}, { include_hidden: false, selected: [1, 2, 4] }, { class: 'sample_select2', multiple: true } %>
画面イメージ
