ActiveHashのdata属性をJavaScriptで出力

ActiveHashのdata属性を扱うには・・・・。

オリジナルアプリの作成で、ActiveHashのdata属性をプルダウン選択した時にJavaScriptで出力したいと考えていて以下のように記述していました。

訂正前

view/test.html.erb

#form_withをして以下の記述
 <%= f.collection_select(:hoge_id, Hoge.all, :id, :name, {}, {class:"select-box", id:"hoge"}) %>

models/hoge.rb

#ActiveHash
 self.data = [
    { id: 1, name:'----' }, { id: 2, name:'1' , multiple: 1 }
  ]

JavaScript/hoge.js

const test = function (){

const selectHoge = document.getElementById("Hoge");
  selectHoge.addEventListener('change', function (){
    const hogeSelectBox = document.getElementById("hoge");
    const hogeMultiple = hogeSelectBox.options[ hogeSelectBox.selectedIndex].getAttribute("data-multiple");
    console.log(hogeMultiple);
  });

同じ機能を実装された方の記事を参考にイジってみました・・・。

:id, :nameの後の記述に :multiple　や :data を（）や{}の中に書き加えて何度か試み、同じ機能実装をしようとされている方の記事を参考に、リファレンスで確認して記述をしてみますが、理解できるレベルにはまだ少し遠いようです。

出力成功の記述（訂正後）

<% hoge_options = Hoge.order(:id).map { |c| [c.name, c.id, data: { multiple: c.multiple}] } %>
<%= f.select(:hoge_id, hoge_options, {}, {class:"#", data{select:0}, id:"hoge"}) %>

プルダウンにする記述にdata属性が与えられていないのが原因で、nullが表示されていたと考えられます。
１行目のmapメソッドを用いた記述には、data属性があり、そこから、ActiveHashに設定してmultipleを取得できているのだと考えられます。
2行目はcollection_selectからselectに変更されて、hoge_optionsが記述されています。
これは、１行目で作った、data属性の含む情報をプルダウンで表示されるようにしています。
・collection_selectはDBからの情報を元に取得して作成。
・selectはDBからの情報を取得せずに作成。
するみたいで、それぞれのリファレンスや関連記事を参考にしつつcollection_selectのまま作ってみましたが、うまく扱えずエラーが返ってきました。
参考にした記事の記述方法でするとdata属性を取得して、JavaScriptでも数値が返ってきたので現状はこれでやってみたいと思います。
まだまだ知らない事だらけなので、チャレンジしてみる⇨情報を集める⇨情報を元に組み立てみる⇨レシピ通りに作るを繰り返して自分の血肉にして行けたらと思います。

プルダウンで選択したdata属性を足して、フォームに送信できたらとりあえずの目標は達成なのでもう一息です。

参考記事は　こちらです