【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によって、クラスを追加・削除する方法について紹介しました。
以上で解説を終わります。