【JavaScript】selectタグのoptionを選択した時にselected属性を付与する

タイトルの通り、selectタグのoptionを選択した時に、そのoptionタグにselected属性を付与する方法を紹介します。

この記事を書いたきっかけ

selectタグのoptionの初期値を設定するには、optionタグにselected属性を付与します。

しかし、このselected属性は、サイト上で他の選択肢を選択しても移動しません。

つまり、何を選択してもselected属性はHTMLファイルで定義したoptionタグに付いたままです。
（デベロッパーツールでselectタグの中を見てみると一目瞭然です）

この挙動により何が生じるかというと、例えば、以下のような処理を行いたいとします。

• ボタンをクリックするとselectタグを複製して表示させる
• 選択肢が変わっていたら、複製先にもそれを反映させること

セレクトボックスの初期値から違う値を選択した状態でselectタグを複製すると、複製先の見た目はselected属性が付いた選択肢が表示されてしまいます。

つまり、初期値が「A」のセレクトボックスで「B」を選択、その後複製して表示させると「A」が選択された状態になってしまいます。（期待値は「B」が選択された状態ですね）

これの対処法が、「セレクトボックスの選択肢を選択するたびに、selected属性を動的にjsで移動させる」になります。

サンプルコード

Codepenに動作確認できるコードを用意しました。

See the Pen
【JavaScript】selectタグのoptionを選択した時にselected属性を付与する by dadada (@dadada-dadada)
on CodePen.

解説

処理自体はとてもシンプルです。

const setOptionSelected = (_select) => {
	const elmOptions = Array.from(_select.children);
	elmOptions.forEach(_option => {
		if (_option.hasAttribute('selected')) _option.removeAttribute('selected');
	});
	elmOptions[_select.selectedIndex].setAttribute('selected', '');
};

この関数は、optionタグのselected属性を一旦削除して、その後選択したoptionタグにselected属性を付与しています。

const elmSelects = [...document.querySelectorAll('.setOptionSelected')];
elmSelects.forEach(_elmSelect => {
  _elmSelect.addEventListener("change", () => {
		setOptionSelected(_elmSelect);
	});
});

先程の関数を、.setOptionSelectedclassを付与している要素の値が変わったタイミングで実行しています。