プルダウンの項目に値を持たせて計算したい

前提・実現したいこと

現在食品の栄養価の計算を行うWEBアプリケーションを作成したいと思っています。
そこでHTMLとJavaScriptでプルダウンを作成をしました。
現いるプルダウンの挙動

実現したいこととしては、食品を選択したら買い物カゴの要領で食品の値が計算されていくようにしたいです。
下記の画像のようにできればと考えています。

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

プルダウンの情報に値の載せ方がわからない状態です。

該当のソースコード

項目が多すぎるので一部の掲載ですが、プルダウンの項目としては下記の入力です。

<option class="beans">あずき</option> <option class="beans">こし生あん</option> <option class="beans">さらしあん</option>

試したこと

Railsのactive hashでプルダウンを作成し値を持たせてみることを実施したがプルダウンの連携を作ることができせんでした。

「プルダウン　情報取得」や「プルダウン　値」といった検索方法で探し回ったのですが結局解決の糸口を見つけることができませんでした。

補足情報（FW/ツールのバージョンなど）

最近始めたばかりでどうしたらいいか皆目検討がつかない状態になってしまいました。
何かこうしたらいいよや、こういった記述を使えばいけるんじゃないなど、教授願えればと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

台帳のようなリストをつくっておいて参照するか
option自体にカスタムデータを設定するとよいのでは？

HTML
1<select>
2<option value="">---</option>
3<option value="りんご" data-price="1000">りんご</option>
4<option value="みかん" data-price="850">みかん</option>
5<option value="バナナ" data-price="350">バナナ</option>
6<option value="いちご" data-price="1200">いちご</option>
7</select>