【Rails】セレクトボックスの選択肢をDBから取得し、data属性も持たせる方法

rails

こんにちは。菜笑[なえ] (@nae310_)です。

今回はRailsでDBから取得したデータを使ってセレクトボックスを作成し、optionにdata属性を持たせる方法についての備忘録です。

selectの基本的な使い方はこちらをどうぞ。

完成コード

<%= form_with model: @post, url: posts_path, do |form| %>
  <%= form.select :user_id, @users.map{ |user| [user.name, user.id, {"data-age": user.age}] } %>
<% end %>

@users のデータはこんな感じです。

@users = User.all
@users.first
=> { id: 1, name: '名前', age: 20 }

mapメソッドの使い方

今回の完成コードではRubyのmapメソッド を使用して、選択肢の配列を作成しています。
基本的な使い方はこちらです。

@users.map{ |user| [user.name, user.id] }

= @users.map{ |user| [ 選択肢の表示名, 実際に送信されるデータ] }

optionにdata属性を持たせる方法

@users.map{ |user| [user.name, user.id, {"data-age": user.age}] }

= @users.map{ |user| [ 選択肢の表示名, 実際に送信されるデータ, {data属性のデータ}] }

data属性の情報をハッシュで指定するだけです。

キーを文字列とせずシンボルで扱おうとすると、ハイフンがエラーになってしまうので、必ず文字列で指定してください。
""大切です。

NG例

<%= form.select :user_id, @users.map{ |user| [user.name, user.id, {data-age: user.age}] } %>

環境

Rails 5.2

おわりに

selectを使用するときはDBからデータを取ってきて使用することが多いと思うので、mapの理解は必須になるかなと思います。

data属性を使用するとなると、options_for_select を使っているものがよく出てきます。
が、mapだけで十分実現できるのでシンプルな書き方で実装していきたいですね。

SNS

Twitter:@nae310_
Instagram:310nae