セレクトボックスについて
セレクトボックスについて
セレクトボックスを実装する際にセレクトボックスについて詳しく調べたので、備忘録としてこちらにまとめます。
下記のようなセレクトボックスを実装した。
コードは、以下のようになっている。
[app/views/cooking_informations/_search_time_form.html.slim]
= form_with url: search_calculate_cooking_time_cooking_informations_path, local: true do |f|
.form-group
= f.collection_select :fish_kind, @fishes, :kind, :kind, { include_blank: '魚の種類(必須)'}, {class: 'search_select_form'}
= f.collection_select :cooking_name, @cookings, :name, :name, { include_blank: '料理の種類(必須)'}, {class: 'search_select_form'}
= button_tag type: 'submit', class: 'btn btn-primary search_button' do
i.fas.fa-search
セレクトボックスを下記のように検索すると検索後にセレクトボックスの状態が選択した状態にならずに、初期状態になってしまう。
これは、HTTPはステートレスなプロトコルな為である。
検索後にセレクトボックスを選択された状態にする為には、以下のように初期値を選択する[selected]を記述すればOKである。
[app/views/cooking_informations/_search_time_form.html.slim]
= form_with url: search_calculate_cooking_time_cooking_informations_path, local: true do |f|
.form-group
= f.collection_select :fish_kind, @fishes, :kind, :kind, { include_blank: '魚の種類(必須)', selected: params[:fish_kind] }, {class: 'search_select_form'}
= f.collection_select :cooking_name, @cookings, :name, :name, { include_blank: '料理の種類(必須)', selected: params[:cooking_name]}, {class: 'search_select_form'}
= button_tag type: 'submit', class: 'btn btn-primary search_button' do
i.fas.fa-search
上記のように記述することで、検索をした時にサーバーに検索の条件が投げられてHTMLファイルをレスポンスする時に、selectedの値がparamsで受け取った値(検索した時の条件)に初期状態が選択されてレスポンスされる。
ちなみに、セレクトボックスのそれぞれの箇所は以下のような意味になっている。
= f.collection_select :fish_kind, @fishes, :kind, :kind, { include_blank: '魚の種類(必須)', selected: params[:fish_kind] }, {class: 'search_select_form'}
最初の[:fish_kind]の部分:HTMLだと以下のname部分(サーバーで受け取る時には、params[:fish_kind]になる)
<select class="search_select_form" name="fish_kind" id="fish_kind"><option value="">魚の種類(必須)</option>
@fishesの部分:ブラウザの画面上に表示したりDBに送る値を配列やハッシュで記述する。
※配列かハッシュで記載する。
<option value="アジ">アジ</option> <option value="マメアジ">マメアジ</option> <option value="イカ">イカ</option> <option value="サバ">サバ</option> <option value="マハゼ">マハゼ</option> <option value="カサゴ">カサゴ</option> <option value="タチウオ">タチウオ</option> <option value="カワハギ">カワハギ</option> <option value="イシモチ">イシモチ</option> <option value="メジナ">メジナ</option> <option value="タコ">タコ</option>
最初の[:kind]の部分:DBに送られる値(@fishesのように配列を渡している部分の配列やハッシュの値(キーetc)から選択)
HTMLファイルだと以下のvalue部分になる。
<option value="アジ">アジ</option> <option value="マメアジ">マメアジ</option> <option value="イカ">イカ</option> <option value="サバ">サバ</option> <option value="マハゼ">マハゼ</option> <option value="カサゴ">カサゴ</option> <option value="タチウオ">タチウオ</option> <option value="カワハギ">カワハギ</option> <option value="イシモチ">イシモチ</option> <option value="メジナ">メジナ</option> <option value="タコ">タコ</option>
[:kind]の部分をidに変えるとHTMLが以下のようになり、fishのid値がvalueになり、この値がDBに送られる。
<option value="1">アジ</option> <option value="2">マメアジ</option> <option value="3">イカ</option> <option value="4">サバ</option> <option value="5">マハゼ</option> <option value="6">カサゴ</option> <option value="7">タチウオ</option> <option value="8">カワハギ</option> <option value="9">イシモチ</option> <option value="10">メジナ</option> <option value="11">タコ</option>
2番目の[:kind]の部分:ブラウザの画面上に実際に表示する部分(@fishesのように配列を渡している部分の配列やハッシュの値(キーetc)から選択)
[:kind]の部分を[:created_at]にするとHTMLは、以下のようになる。
<option value="アジ">2021-11-01 14:12:48 UTC</option> <option value="マメアジ">2021-11-01 14:12:48 UTC</option> <option value="イカ">2021-11-01 14:12:48 UTC</option> <option value="サバ">2021-11-01 14:12:48 UTC</option> <option value="マハゼ">2021-11-01 14:12:48 UTC</option> <option value="カサゴ">2021-11-01 14:12:48 UTC</option> <option value="タチウオ">2021-11-01 14:12:48 UTC</option> <option value="カワハギ">2021-11-01 14:12:48 UTC</option> <option value="イシモチ">2021-11-01 14:12:48 UTC</option> <option value="メジナ">2021-11-01 14:12:48 UTC</option> <option value="タコ">2021-11-01 14:12:48 UTC</option>
{ include_blank: '魚の種類(必須)', selected: params[:fish_kind] }の部分:オプション部分(セレクトボックスの最初の値を選んだり、最初に選択されている値を選択したりなどを決められる)
※include_blank: trueにすると以下のように先頭の値が空欄になる。(include_blankで文字列などを入れるとそれがセレクトボックスの先頭になる。)
※selectedで値を選択すると、最初からそれが選択された状態になる。(以下参照)
HTML上では、以下のように[selected]になっている。
<option selected="selected" value="アジ">アジ</option> <option value="マメアジ">マメアジ</option> <option value="イカ">イカ</option> <option value="サバ">サバ</option> <option value="マハゼ">マハゼ</option> <option value="カサゴ">カサゴ</option> <option value="タチウオ">タチウオ</option> <option value="カワハギ">カワハギ</option> <option value="イシモチ">イシモチ</option> <option value="メジナ">メジナ</option> <option value="タコ">タコ</option>
{class: 'search_select_form'}の部分:HTMLオプション
idやclassを付与できる部分
