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で右クリックを無効・禁止にする方法

2022.12.07
78
JavaScript

【JavaScript】Local Storageに複数のデータをJSON形式で保存。配列で取得する方法

2022.11.20
206
JavaScript

【JavaScript】比較演算子==と===の違いについて

2022.11.30
52
JavaScript

JavaScriptでスマホ画面をタップした時のイベントを検知する方法

2022.11.15
404