0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

select属性にclass名を付与したい

Last updated at Posted at 2020-10-30

railsでアプリケーション作成中にセレクトボックス関連でつまづいたため記録として残しておきます。

環境は以下のとおりです。
ruby 2.6.5
Ruby on Rails 6.0.3.
##行いたいこと
もともと営業時間のセレクトボックスは実装済み。
24時間営業のボタンを追加+Javascriptを使ってボタンをクリックしたときに全てのセレクトボックスに'00'が入るようにしたい。(以下写真のイメージ)
<クリック前>
f1d0dc39dd28504edcd3be06647cbad1.png
<クリック後>
95f4366f509951f98ab68ff151686fa3.png

##つまづいた点
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"} %>

再読み込みをし検証ツールで確認してみたところ・・・
c0feeff4834008d06bcb50ce6cfb9a04.png

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"} %>

acd7910429ca8c88fa52e24ca09fc460.png

クラス名が付与されたのでそのあとは、順序の2.3と行い無事思っていた実装を行うことができました!

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?