option selected属性｜プルダウンメニューの初期値を設定する方法

option selected属性とは？

Webフォームの中核をなす要素の一つがセレクトボックスです。その選択肢の中で、特定の項目を予め選択しておく時に役立つのが「option selected」属性です。

HTMLにおいて、セレクトボックス内の

利用者が最も選びやすいか、または最も選ばれるであろう選択肢を予め選んでおくことは、ユーザーエクスペリエンスの向上に直結します。この短い属性が、より洗練されたフォームの設計へと導くのです。

option selected属性の使い方

続いて、option selected属性の使い方について説明します。

基本的な使い方

以下のコードは「option selected」属性を使って「2番目のoption要素」を初期選択状態にする例です。

下記のコードを実行すると、プルダウンメニューに「アメリカ」が選択された状態で表示されます。

JavaScriptで動的に設定

option selected属性は、JavaScriptで動的に設定することもできます。

以下のコードは、ボタンをクリックしたときに、プルダウンメニューの初期値を「中国」に変更する例です。

<select name="country" id="country-select">
<option value="jp">日本</option>
<option value="us">アメリカ</option>
<option value="cn">中国</option>
</select>

<button onclick="changeCountry()">中国を選択</button>

<script>
function changeCountry() {
const countrySelect = document.getElementById('country-select');
countrySelect.value = 'cn';
}
</script>

よくある問題と解決策

1. 初期値が設定されない

原因

selected属性のスペルミス
option要素がselect要素内にない

解決策

スペルミスを修正する
option要素をselect要素内に配置する

2. 複数のoption要素が選択される

原因

selected属性を複数のoption要素に設定している

解決策

初期値として選択したいoption要素にのみselected属性を設定する

まとめ

option selected属性は、ユーザーにとって最も関連性が高いか、最も頻繁に選択されるであろう選択肢を予め設定しておくことで、ユーザーエクスペリエンスを向上させる重要なツールです。

この記事では、その基本的な使い方からJavaScriptを使用した動的な設定方法、さらには一般的な問題とその解決策までを網羅しました。

ここで学んだ知識を活かして効果的にプルダウンメニューをカスタマイズし、使い勝手の良いWebフォームを設計していきましょう。