初学者の備忘録
初学者の備忘録です。今回は前に投稿したフォームヘルパー編で出てきたフォームの種類selectについて詳しく紹介していこうと思います。応用編です。
selectとは
フォームを選択している状態だと選択フォームが表示されるフォームレイアウトのことです。
閉じている状態
選択している状態
一覧
対象Modelから対象カラムに保存されているデータを一覧表示させます。
<%= f.collection_select :area_id, Area.all, :id, :name, { include_blank: "地方を選択してください" }, { class: "form-control"} %>
上記のコードではAreaモデルからnameカラムの一覧データを表示しています。
日本語訳すると:area_idからArea.allで地方情報を全て持ってきて、idが実際のデータでnameが表示される表示名といった感じです。
collection_selectはフォームヘルパーメソッドの一つなのでform_withを使用する場合こちらのやり方をおすすめします。それとこの実装方法だと初期値も自分で設定してあげることができます。
mapを使用した別の実装方法もあります。下記のコードです。
<%#= f.select :area_id, Area.all.map{|a| [a.name, a.id]}, { prompt: "地方を選択してください" }, { class: "form-control" } %>
ですがmapのメリットをいかせてませんし、フォームヘルパーメソッドが使用できるのにこちらを実装する理由がないのであまり使用しません。（*初学者の意見です）
失敗したとこ
上記で説明で実装可能ですが、ここでは失敗してためになったことを残しておこうと思います。
collection_selectについてよく理解していなかった頃、selectフォームを実装して下記のコードを記述しました
<%= f.select :area_id, Area.all, { prompt: "地方を選択してください" }, { class: "form-control" } %>
上記のコードではArea.allからとってきたデータをIDで表示させる仕組みらしいです。なのでデータ表示が
このようになってしまいました。
IDで表示させるのではなくコレクションとして表示しなくてはならないのでcollection_selectを使用します。
一覧セレクトボックスの実装は以上となります。次はJavaScriptを使用してセレクトボックスの中身が変わる仕組みを実装していきます。
JavaScript
Coming Soon