選択したプルダウン別に、classを割り振り、cssを当てる方法

経緯

プルダウンの選択方式で選んだ項目を一覧で表示する際、それぞれの値に別々の色をつけたい。
と思ったのがきっかけ。

開発環境

Rails 6.1.7.4
ruby 3.0.1

• 繰り返し処理で表示しているため、通常通りclassをつけると、全て同じclassになってしまう。

選択式にしたプルダウンを表示するコードのクラス

<td class="priority_class　display-4" > 省略

検証ツールで確認 ※余計な情報は黒塗り

これだと、選択肢で選んだ内容が違くても、全て同じCSSが適用されてしまう

条件によりclassが割り振られるようにする

※enum日本語化してるので、設定はこちら。

enum priority: { low: 0, medium: 1, high: 2 }

app/helper/モデル名_helper.rb　

def priority_class(priority)
    case priority
    when "low"
      "low-priority"
    when "medium"
      "medium-priority"
    when "high"
      "high-priority"
    else
      ""
    end
  end

elseいらないかも？

選択式にしたプルダウン

　<%= プルダウンのコード %>

<td class="<%= priority_class(モデル名.priority) %>　 display-4 "> 省略

上記のように記述することで、各選択肢ごとに違うclassがあてがわれ、CSSも別とすることができる(入れ子なので少しわかりづらい）

<%= priority_class(モデル名.priority) %>の部分が、helperで定義した、case文に一致したclass名となる。

検証ツールで確認

※high,medium,lowそれぞれに違うclassが割り振られているのがわかる
下記のように別々にcssを当てて、適用できるようになった！

css設定例

.low-priority {
  background-color: rgb(2, 202, 2);
  color: white;
}

.medium-priority {
  background-color: rgb(229, 205, 84);
 　　color: white;
}

.high-priority {
  background-color: red;
  color: white;
}

実際の状態

まとめ

もっとスマートな方法があるかもしれないが、目的は果たせたのでよしとする。
やりたいことを見つけて、どうしたらできるのかと調べていくことで、いろいろな方法が出てくるのはとても面白い。
リファレンスを理解する力が不足しているので、効率的な検索方法などを知りたいものだ。