💬

Railsのフォームヘルパーで、セレクトボックスのoptionにdata属性を持たせる方法

2023/03/18に公開

こんな感じでできました。

<%= form_with do |form| %>
  <%= form.select :recording_method, [
    ['オプション1', 'option1', { data: { hoge: 'opt_1' } }],
    ['オプション2', 'option2', { data: { hoge: 'opt_2', fuga: 'opt_2_fuga' } }]
  ] %>
<% end %>

上記erbでこんな感じのHTMLが生成される(name属性とか省略)。
非対称にdata属性つけることもできるんですね。

<select>
  <option data-hoge="opt_1" value="option1">オプション1</option>
  <option data-hoge="opt_2" data-fuga="opt_2_fuga" value="option2">オプション2</option>
</select>

参考(というかほぼそのまま): https://310nae.com/rails-select-data/

ちなみにselect要素の方にdata属性を持たせたい場合は下記のようにform.selectの第4引数に持たせないといけないので注意(第3引数はメソッドのオプションらしい)。

<%= form_with do |form| %>
  <%= form.select :recording_method, [
    ['オプション1', 'option1', { data: { hoge: 'opt_1' } }],
    ['オプション2', 'option2', { data: { hoge: 'opt_2', fuga: 'opt_2_fuga' } }]
  ], {}, data: { hoge: 123 } %>
<% end %>

参考: https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-select

Discussion