アクティブハッシュから複数の値をプルダウンメニューで取得したい

Question

前提・実現したいこと

アクティブハッシュに追加したハッシュ内の複数の値をプルダウンメニューで選択し、情報を取得したいです。

発生している問題・エラーメッセージ

プルダウンの実装にf.collection_selectを使用していますが、引数の数に制限がありアクティブハッシュから複数の値を取得できない状況です。
実際には「name」の他に「price」や「kcal」の情報も、プルダウンメニューで選択された際に取得したいです。（プルダウンメニューに表示されるのはnameの値のみ）

class Onigiri < ActiveHash::Base
  self.data = [
    { id: 1, name: '--' },
    { id: 2, name: 'コク旨炒飯おむすび', price: 121, kcal:220, carbohydrate:39, protein:5, lipid:4, vitamin:0, mineral:0},
    { id: 3, name: '梅おむすび', price:100, kcal:185, carbohydrate:41, protein:3, lipid:1, vitamin:0, mineral:0 },
    { id: 4, name: '鮭おむすび', price: 139, kcal:188, carbohydrate:37, protein:6, lipid:2, vitamin:0, mineral:0 }
  ]
end

<%= form_with model: @order, url:orders_path, local: true do |f| %>
          <div class="article-box">
            おにぎり
            <%= f.collection_select(:onigiri_id, Onigiri.all, :id, :name, {}, {class:"onigiri-select"}) %>
          </div>
          <div class="article-box">

試したこと

id以外をキー「all」の値としてネストすることで値を取得できないか試してみましたがエラーが起きます。

{ id: 2, all:{ name: 'コク旨炒飯おむすび', price: 121, kcal:220, carbohydrate:39, protein:5, lipid:4, vitamin:0, mineral:0}},

<%= f.collection_select(:onigiri_id, Onigiri.all, :id, :all[:name], {}, {class:"onigiri-select"}) %>

よろしくお願いいたします。

Comments

[gouf]

理想とする HTML の出力結果を (質問欄を編集して) 示せますか?

[ken_tail]

プルダウン　----
　　　　　　おにぎり　　　←選択
　　　　　サンドウィッチ

商品名　　　値段　　　kcal
おにぎり　　100 　　 120

プルダウンで商品選択後に表に上記のような形で表示される状態を想定しています。

[yukihide1188]

行いたいことは情報を取得し、
[ データベースに保存すること ] でしょうか？
[ HTMLに出力すること ] でしょうか?

[gouf]

1. JavaScript 側に JSON で <table/> 表示のためのデータを渡す
2. <select/> された内容が変わったときに <table/> のデータを書き換えるイベントを設定する

といった処理の流れは想像できますか?

Answer 1

コントローラーにて「@onigiris = Onigiri.all」を追記し、HTMLにて下記のように書くことで全ての値をアクティブハッシュから取ってくることに成功しました。

<%= form_with model: @order, url:orders_path, local: true do |f| %>
          <div class="article-box">
            おにぎり
            <%= f.collection_select(:onigiri_id, Onigiri.all, :id, :name, {}, {class:"onigiri-select"}) %>
            <div id="onigiri">
                <% @onigiris.each do |onigiri| %>
                  <div   id="<%=onigiri.id%>" style="display:none;">
                    <p class="price"><%= onigiri.price %></p>
                    <p class="kcal"><%= onigiri.kcal %></p>
                    <p class="carbohydrate"><%= onigiri.carbohydrate %></p>
                    <p class="protein"><%= onigiri.protein %></p>
                   <p class="vitamin"><%= onigiri.vitamin %></p>
                   <p class="lipid"><%= onigiri.lipid %></p>
                  </div>
                <% end %>
            </div>
          </div>