13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

simple_form の select ボックスで data 属性を設定する書き方を調べてみた

Last updated at Posted at 2018-07-28

simple_formform_for 以下のコードをすっきりさせるのによく使われると思います。
simple_form で data 属性ありの select ボックスの書き方がぱっと調べても出てこなかったので、メモしておきます。

動作確認したバージョン

  • rails 5.1.5
  • ruby 2.4.4
  • simple_form 3.5.0

f.select で書く場合

simple_form を使わず通常の form_for で書く場合、options_for_select を使ってこのような形で書けます。

= f.select :name, options_for_select([ ['田中太郎', 1, data: {age: 20}], ['鈴木一郎', 2, data: {age: 30}] ])

生成される option の形はこのようになります。

<option data-age="20" value="1">田中太郎</option>
<option data-age="30" value="2">鈴木一郎</option>

simple_formの場合

色々試行錯誤したところ、この形でOKでした。collection: options_for_select メソッドで指定していた引数をそのまま渡せばいいだけです。

= f.input :name, as: :select, collection: [ ['田中太郎', 1, data: {age: 20}], ['鈴木一郎', 2, data: {age: 30}] ]

少しコードを追って確認

後学のため、simple_form を f.input :name as: :select のような形で使う場合、なぜ collection の引数を options_for_select の引数と同じ形にできるのか、simple_form のコードをすこし追ってみます。

まずsimple_form で f.input :name as: :select という形で select ボックスを生成する時、rails の ActionView::Helpers::FormOptionsHelper モジュールの collection_select メソッドを呼んでいます。

このメソッドの引数の collection[ ['田中太郎', 1, data: {age: 20}], ['鈴木一郎', 2, data: {age: 30}] ] が渡る形になります。

collection_select メソッドでは、 rails の ActionView::Helpers::Tags::CollectionSelect オブジェクトの render メソッドを呼んでいます。

render メソッドでは、ActionView::Helpers::FormOptionsHelper モジュールの options_from_collection_for_select メソッドを呼んでいます。

options_from_collection_for_select メソッドでは、ActionView::Helpers::FormOptionsHelper モジュールの options_for_select メソッドを呼んでいます。

このように一通り追ってみると、simple_form からも結局 options_for_select メソッドを呼んでいるので、options_for_select メソッドの引数の形で collection に指定しても動くということなのかなという理解をしました。

参考サイト

13
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?