railsでアプリケーション作成中にセレクトボックス関連でつまづいたため記録として残しておきます。
環境は以下のとおりです。
ruby 2.6.5
Ruby on Rails 6.0.3.
##行いたいこと
もともと営業時間のセレクトボックスは実装済み。
24時間営業のボタンを追加+Javascriptを使ってボタンをクリックしたときに全てのセレクトボックスに'00'が入るようにしたい。(以下写真のイメージ)
<クリック前>
<クリック後>
##つまづいた点
select属性にclass名が付与されない!
以下の順序で進めようと考えていましが見事に出鼻を挫かれました。
1.該当のselect属性に同じクラス名を付与
2.Javascriptで対象のclass名を持った要素をまとめて取得
3.forEach関数で取得したフィールドの値を'00'に変更
とりあえずクラス名をつけるために以下のようなコードに書き換えました。({}の一番最後にclass: "opening-hour"
を記述する)
<%= f.time_select :open_time, {prompt: true, ignore_date: true, minute_step: 15, class: "opening-hour"} %> 〜
<%= f.time_select :close_time, {prompt: true, ignore_date: true, minute_step: 15, class: "opening-hour"} %>
class名が付与されていませんでした。
##結論
###ヘルパーのオプションとhtmlのオプションは分けて記述する必要がある。
以下のブログ記事を参考にさせていただきました。
date_selectの使い方【Rails】
time_field レファレンス をみるとヘルパーのオプションとHTML属性がそれぞれ記載されています。この2つは同じ{ }に入れるのではなく分ける必要があるということでした。
私のコードも以下のように書き換えることで無事クラス名が付与されました!
<%= f.time_select :open_time, {prompt: true, ignore_date: true, minute_step: 15}, {class: "opening-hour"} %> 〜
<%= f.time_select :close_time, {prompt: true, ignore_date: true, minute_step: 15}, {class: "opening-hour"} %>
クラス名が付与されたのでそのあとは、順序の2.3と行い無事思っていた実装を行うことができました!