【Rails】セレクトボックスを作る方法と注意点【select・collection_select】

Railsのセレクトボックスって、
引数の順番とか指定できる項目の種類が
ごちゃごちゃしてて、なんとなーくの理解だったので、
色々調べてみました！

なお、間違いやもっと良い方法がある...等ありましたら、
お気軽にコメントください。お願いいたします！

作成方法①：select メソッド

select メソッドを使ったセレクトボックスの構文は下記です。

select(オブジェクト名, オプションタグの要素(配列 or ハッシュ), オプション, HTMLオプション)

まず、コントローラーでselect に渡す要素を準備する必要があります。どのような方法でも良いですが、例として下記のような取得方法があるでしょう。

app/controllers/user_controller.rb

@users = User.pluck(:name, :id)
# => [["A太郎", 1], ["B太郎", 2], ["C太郎", 3]]

@users = User.all.map { |user| [ user.name, user.id ] }
# => [["A太郎", 1], ["B太郎", 2], ["C太郎", 3]]

ビュー側は以下のように書きます。

app/views/user/index.html.erb

<%= f.select :id, @users, {prompt: "選択してください"}, :class => 'form-control', :id => 'user_id' %>

select に指定できるオプション

オプションについては、Rails ドキュメント
をご覧ください。

複数選択や選択を無効化するなどの詳細な設定ができますよ！

作成方法②：collection_select メソッド【おすすめ】

collection_select メソッドを使ったセレクトボックスの構文は下記です。

collection_select(オブジェクト名, メソッド名, 要素の配列, value属性の項目, テキストの項目, オプション, HTMLオプション, イベント属性)

select メソッドの際は、DBから取得したデータを select 用に加工する必要がありましたよね。
もしくは、ビュー内でDBから直接データを取得するような指定をする必要があり、
MVCの分離ができていなかったですよね。

しかし「collection_select」メソッドは加工することなく、セレクトボックスを簡単に作成できます！

app/views/user/index.html.erb

<%= f.collection_select :id, User.all, :id, :name, {prompt: "選択してください"}, :class => 'form-control', :id => 'user_id' %>

まあ、「User.all」だってDBから直接取得してるじゃないか！！
と突っ込まれたら、何も言えないのですが...。

それにしても、簡単に記述できるので、個人的にはこちらの方が使いやすいかなーといった感じです。

collection_select に指定できるオプション

オプションについては、Rails ドキュメント
をご覧ください。

js用のオプションを指定できるのも便利ですよね。
具体的には「onclick」イベントなどですね。

オプション指定の順番は注意！

さらには、オプションの指定には注意点もあります。HTMLオプションを指定する際には、先にオプションを必ず指定しなければ、うまく動きません（引数の順番が１つずれちゃうので、当たり前と言えば当たり前なのかもですが）

app/views/user/index.html.erb

# これはOK
<%= f.collection_select :id, User.all, :id, :name, {prompt: "選択してください"}, :class => 'form-control', :id => 'user_id' %>

# これもOK
<%= f.collection_select :id, User.all, :id, :name, {}, :class => 'form-control', :id => 'user_id' %>

# これはNG
<%= f.collection_select :id, User.all, :id, :name, :class => 'form-control', :id => 'user_id' %>

参考

【Rails】セレクトボックスを作る方法と注意点【f.select】