Railsでoptgroup付きプルダウンメニューを配列・ハッシュから作成

スポンサーリンク
スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

HTML のプルダウンメニュー(select/optionタグ)で optgroup タグを使うと、選択メニューをグループで区切ることができます。配列やハッシュのデータから optgroup 付きのプルダウンメニューを、Rails の組み込みヘルパーで作成する方法を調べたところ、select/select_tag と grouped_options_for_select のヘルパーを組み合わせて使うと簡単に作成できることが分かりました。

スポンサーリンク

— 環境 —
Rails 4.1.6

プルダウンメニュー用の選択メニューを用意

まずは、モデルにプルダウンメニュー用の選択メニューの配列を準備します。

app/models/book.rb

Book::SELECT_OPTIONS を grouped_options_for_select に渡して、プルダウンメニューを作成する。ここでは、プルダウンメニューの選択リストの配列データを直接モデルに書きましたが、モデルの見通しが悪くなるようであれば、モジュールや定数設定用のファイルなどに切り出したほうが良いと思います。

コントローラーで new メソッド等を作成

app/controllers/books_controller.rb

コントローラーについては、詳しいコードは省略。

ビューで select_tag と grouped_options_for_select を使う

app/views/books/new.html.erb

ビューでは以上のように、select/select_tag と grouped_options_for_select を組み合わせて使います。上記例で使った select_tag の第一引数は、出力される select タグの id, name となります。grouped_options_for_select メソッドには、プルダウンメニュー用のフォーマットに則った配列/ハッシュのデータを渡す。

出力される HTML ソース

上述したコードで出力される HTML のソースは以下のようなものとなる。

optgroup 付きでグループが区切られて、プルダウンメニューが見やすいです。

Screen Shot 2015-08-23 at 21.03.21

ハッシュでプルダウンメニュー用のデータを設定する場合

以下のように、ハッシュでプルダウンメニュー用のデータを設定することもできます。ビューでこのハッシュを grouped_options_for_select に渡して、select/select_tag と組み合わせて使うとOK。

以上、optgroup 付きのプルダウンメニューを、Rails の組み込みヘルパーで出力するサンプルコードでした。

スポンサーリンク
パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!