セレクトボックスの実装

セレクトボックスの実装

下記のようなセレクトボックスを実装する方法です

Image from Gyazo

セレクトボックスの記述は、以下のようになる

<%= f.select 属性, 選択肢の集合, {オプション}, {HTMLオプション} %>

もしくは

<%= f.select( 属性, 選択肢の集合, {オプション}, {HTMLオプション} ) %>

ex)

<%= f.select :role, {'一般': 0, '管理者': 1}, { include_blank: '指定なし' }, class: 'form-control' %>

:roleは、属性部分で対応するカラム名を記載する
{'一般': 0, '管理者': 1}は、選択肢の集合部分
{ include_blank: '指定なし' }は、初期状態の選択肢で選択肢の1番上にくるもの(選択肢の1番上にくる表記を無くして、選択肢だけにしたい場合は{}と空欄で記載する)

Image from Gyazo

下記のコードは、セレクトボックスを使って[ransack]Gemによりセレクトボックスで選択した内容で検索するコードです。

[app/views ファイル]

      <%= search_form_for @q, url: admin_users_path do |f| %>
        <%= f.search_field :first_name_or_last_name_cont, class: 'form-control mr-1', placeholder: '検索ワード' %>
        <%= f.select :role_eq, { "#{(t 'defaults.general')}": 0, "#{(t 'defaults.admin')}": 1 }, { include_blank: (t '.no_select') }, class: 'form-control mr-1' %>
          <%= f.submit class: 'btn btn-primary'%>
      <% end %>
[confiig/locales/views/ja.yml]

ja:
  defaults:
    general: '一般'
    admin: '管理者'

上記記述は、[enum_help]Gemを使って以下のように記載する事ができる

[app/views ファイル]

      <%= search_form_for @q, url: admin_users_path do |f| %>
        <%= f.search_field :first_name_or_last_name_cont, class: 'form-control mr-1', placeholder: '検索ワード' %>
        <%= f.select :role_eq, User.roles_i18n.invert.map{|key, value| [key, User.roles[value]]}, { include_blank: (t '.no_select') }, class: 'form-control mr-1' %>
          <%= f.submit class: 'btn btn-primary'%>
      <% end %>

※ポイント
[f.select]は、下記のような形式で記載しなければいけないため、オプション部分が不要だからといってオプション部分を省いてはいけない。(オプション部分を省いてHTMLオプションを記載するとHTMLのオプション部分が反映されない)
<%= f.select 属性, {選択肢の集合}, {オプション}, {HTMLオプション} ) %>

参考記事:

Ruby on Railsのf.selectの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

[Rails]Ransackでセレクトボックスを使用する方法 - Qiita

【Rails】完全理解 formでセレクトボックスをつくるselectの使い方 - WEB屋のメモ帳

【Rails】enumを使用したセレクトボックスの実装とDBへの保存 - Qiita

【Rails】enumを使用したセレクトボックスの実装とDBへの保存 - Qiita

【Rails】 enumチュートリアル | Pikawaka - ピカ1わかりやすいプログラミング用語サイト