【Haml】f.selectで生成されるoptionタグを改変する

近況一言メモ

煎茶道のお稽古にとんと行けていない、、、
夏のお茶会には参加したいから、お茶の感を取り戻さなきゃ！

最近は、コード触りすぎて、夢の中でもコード出てくる
これが本当の睡眠学習？！

やりたいこと

"f.select"で生成されるセレクトボックスの中身（optionタグ）をいじりたい
初期値を設定したい

以外と検索してみても、公式レファレンス見てみても、やり方がいまいちピンと来るものがなかった。
なので、以下に、6 パターンまとめてみました。

select_tagでも同じように使えるので（途中の{}は削除する必要があります）、ぜひそちらでも使ってみてください。

概要

= f.select :name, options_for_select(セレクトボックスで表示したい要素配列.map{|c|[セレクトボックスで表示される値, value属性値にセットしたい値, {追加属性記述}]}, 初期値のvalueを選択), {}, {class: 'hoge', id: 'hogehoge'}

value属性値にセットしたい値の記述をなくすと "value = セレクトボックスで表示される値" になります

具体例

#セレクトボックスの選択肢にしたい要素配列
@sample_array_1 = ['aaa', 'bbb', 'ccc']
@sample_array_2 = [{id: 1, name: "aaa"}, {id: 2, name: "bbb"}, {id: 3, name: "ccc"}]
#初期値要素（データベースから読み取ったと仮定）
@selected_sample_1 = 'bbb'
@selected_sample_2 = {id: 2, name: "bbb"}

#基本形１
= f.select :sample, @sample_array_1, {}, {class: 'hoge', id: 'hogehoge'}
#基本形２
= f.select :sample, options_for_select(@sample_array_2.map{|c|[c[:name], c[:id]]}), {}, {class: 'hoge', id: 'hogehoge'}
#属性追加１
= f.select :sample, options_for_select(@sample_array_1.map{|c|[c, {'data-sample'=>c}]}), {}, {class: 'hoge', id: 'hogehoge'}
#属性追加２
= f.select :sample, options_for_select(@sample_array.map{|c|[c[:name], c[:id], {'data-sample'=>c[:id]}]}), {}, {class: 'hoge', id: 'hogehoge'}
#初期値設定1
= f.select :sample, options_for_select(@sample_array_1.map{|c|[c, {'data-sample'=>c}]}, @selected_sample_1), {}, {class: 'hoge', id: 'hogehoge'}
#初期値設定2
= f.select :sample, options_for_select(@sample_array.map{|c|[c[:name], c[:id], {'data-sample'=>c[:id]}]}, @selected_sample_2.id), {}, {class: 'hoge', id: 'hogehoge'}

基本形１

= f.select :sample, @sample_array_1, {}, {class: 'hoge', id: 'hogehoge'}

#基本形１
<select class="hoge" id="hogehoge" name="sample">
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
</select>

基本形２

= f.select :sample, options_for_select(@sample_array_2.map{|c|[c[:name], c[:id]]}), {}, {class: 'hoge', id: 'hogehoge'}

#基本形２
<select class="hoge" id="hogehoge" name="sample">
  <option value="1">aaa</option>
  <option value="2">bbb</option>
  <option value="3">ccc</option>
</select>

属性追加１

= f.select :sample, options_for_select(@sample_array_1.map{|c|[c, {'data-sample'=>c}]}), {}, {class: 'hoge', id: 'hogehoge'}

#属性追加１
<select class="hoge" id="hogehoge" name="sample">
  <option data-sample="aaa" value="aaa">aaa</option>
  <option data-sample="bbb" value="bbb">bbb</option>
  <option data-sample="ccc" value="ccc">ccc</option>
</select>

属性追加２

= f.select :sample, options_for_select(@sample_array.map{|c|[c[:name], c[:id], {'data-sample'=>c[:id]}]}), {}, {class: 'hoge', id: 'hogehoge'}

#属性追加２
<select class="hoge" id="hogehoge" name="sample">
  <option data-sample="1" value="1">aaa</option>
  <option data-sample="1" value="1">bbb</option>
  <option data-sample="1" value="1">ccc</option>
</select>

初期値設定１

= f.select :sample, options_for_select(@sample_array_1.map{|c|[c, {'data-sample'=>c}]}, @selected_sample_1), {}, {class: 'hoge', id: 'hogehoge'}

#初期値設定１
<select class="hoge" id="hogehoge" name="sample">
  <option data-sample="aaa" value="aaa">aaa</option>
  <option selected="selected" data-sample="bbb" value="bbb">bbb</option>
  <option data-sample="ccc" value="ccc">ccc</option>
</select>

初期値設定２

= f.select :sample, options_for_select(@sample_array.map{|c|[c[:name], c[:id], {'data-sample'=>c[:id]}]}, @selected_sample_2.id), {}, {class: 'hoge', id: 'hogehoge'}

#初期値設定２
<select class="hoge" id="hogehoge" name="sample">
  <option data-sample="1" value="1">aaa</option>
  <option selected="selected" data-sample="1" value="1">bbb</option>
  <option data-sample="1" value="1">ccc</option>
</select>

参考

https://stackoverflow.com/questions/18100834/how-to-make-the-f-select-rails-selected https://stackoverflow.com/questions/5052889/ruby-on-rails-f-select-options-with-custom-attributes