LoginSignup
2
2

More than 1 year has passed since last update.

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

Posted at

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オプションを指定する際には、先にオプションを必ず指定しなければ、うまく動きません(引数の順番が1つずれちゃうので、当たり前と言えば当たり前なのかもですが)

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】

2
2
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
2
2