【Rails】プルダウンの値によってCSSを変えることはできますか？

Question

プルダウンの値にごとにCSSを変えたい

現在、Railsを用いてタスク管理アプリを制作しています。
タスクのステータスをプルダウンで選択できるようにしているのですが、選択しているステータスごとにビューに表示するCSSを変えたいです。
例） doing → 黄色、 complete → 青色、 failure → 赤色

また、プルダウンの項目はenumを用いています。
ビューへの表示はselectを用いています。

該当のソースコード

• new.html.haml

= f.select :state, Task.states.keys, { required: "" }

• index.html.haml

.now-state= t.state

• task.rb（モデル）

  enum state: { "New": 0,
                "Doing": 1,
                "Completed!": 2,
                "Failure": 3 }

試したこと

enumに定義している値をCSSに記述すればできると仮設を立てております。

補足情報（FW/ツールのバージョンなど）

こちらを実現するために現在の記述で叶えることができるかどうかわからないのですが、もし他に良い方法などがありましたら、教えていただけたらと思います。

rails ver: 5.2.3

Answer 1

JSが必要です。
select の id（かclass)の changed イベントで、値を読んでCSSを適用する要素のclassを変える
様にしてください

Comments

[hatori_r]

winterboum様

回答いただきありがとうございます。
いただいたご指摘をもとに記述を行ってみます。

[hatori_r]

恐れ入ります。
こちら調べて試してみましたが、どれもうまくいきませんでした。
出来ましたら、詳細の記述を教えていただけないでしょうか？

[winterboum]

できたところまで、質問欄にcodeのせてください
できたというか作ったでも

[hatori_r]

winterboum様
コメントを頂きありがとうございます。
こちらに関してですが、できそうなのでもう少し挑戦してみます