Written by Kasumi

【JavaScript】selectボックスで選択したoptionによってクラスを追加・削除する方法

JavaScriptを使いselectボックスで選択したoptionによって、クラスを追加・削除したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装例

See the Pen
JavaScriptを使い、selectボックスで選択したoptionによってクラスを追加・削除する方法
by Kohei (@kouk05)
on CodePen.0

実装例です。

selectボックスで選択したoptionによって、テキストの内容が変更されてます。

テキストは予め一つの要素として複数用意、CSSで非表示にしてます。

選択したoptionのvalue値とクラス名が一緒の要素はクラスを追加。

それ以外はクラスを削除。

クラスが追加された要素はCSSで表示する処理をしてます。

実装方法は以下の通りです。

HTMLでselectタグを用意

<select name="item">
  <option value="">選択してください</option>
  <option value="item01">リンゴ</option>
  <option value="item02">ブドウ</option>
  <option value="item03">パイナップル</option>
</select>
<div class="item item01">リンゴが選択されました</div>
<div class="item item02">ブドウが選択されました</div>
<div class="item item03">パイナップルが選択されました</div>

まずはHTMLでselectタグを用意します。

name属性に任意の値を設定します。

クラスを追加・削除したい要素を用意します。

CSSで装飾

.item {
  display: none;
}
.item.selected {
  display: block;
}

クラスが追加・削除された時のCSSを追加します。

本記事ではselectedクラスが付与されたらdisplay: block;で要素を表示するようにします。

JavaScript

var item = document.querySelectorAll(".item");
var select = document.querySelector('[name="item"]');

// selectボックスを選択したら
select.addEventListener("change", function () {
  // selectedクラスを削除
  item.forEach(function (element) {
    element.classList.remove("selected");
  });
  // 選択したselectボックスのvalue値と同じクラス名の要素にselectedクラスを付与
  var selected = select.value;
  document.querySelector("." + selected).classList.add("selected");
});

最後にJavaScriptで動的処理を実行します。

selectボックスを選択したらという処理をaddEventListener(引数にchangeを指定)で行い、関数を定義します。

上記関数内でclassList.removeを行い、追加予定のクラスを削除・リセットします。

選択したoptionのvalue値を以下で取得します。

selectボックス要素.value

上記選択した要素にclassList.addでクラスを追加すれば完成です。

まとめ

JavaScriptを使いselectボックスで選択したoptionによって、クラスを追加・削除する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptでページの読み込み中、ローディング画面を表示する方法

2023.02.15
9643
JavaScript

【JavaScript】setTimeoutが効かない。よくあるパターンの対処方法

2022.12.05
6825
JavaScript

マウスでホバー出来る端末以外はCSSで装飾した:hoverを無効にする方法【メディアクエリで解決】

2022.12.27
5686
JavaScript

JavaScriptでオブジェクトのプロパティに変数を追加する方法

2022.12.22
1593