こんにちは。菜笑[なえ] (@nae310_)です。
今回はRailsでDBから取得したデータを使ってセレクトボックスを作成し、optionにdata属性を持たせる方法についての備忘録です。
selectの基本的な使い方はこちらをどうぞ。
あわせて読みたい
【Rails】完全理解 formでセレクトボックスをつくるselectの使い方
こんにちは。菜笑なえです。 今回はRailsでformのセレクトボックスをつくるときに使う、select の使い方についての解説です。 【完成コード】 <%= form_with model: ...
目次
完成コード
<%= 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だけで十分実現できるのでシンプルな書き方で実装していきたいですね。
