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

Web開発の世界では、ユーザーの操作性を向上させる要素の一つとしてプルダウンメニューが頻繁に使用されます。しかし、その便利さを最大限に活かすためには、プルダウンメニューの初期値設定が肝心です。

本記事では、HTMLとJavaScriptを用いて「option selected」属性を駆使し、プルダウンメニューの初期値を設定する方法をわかりやすく解説します。

初期値の設定は、フォームのユーザビリティを高めるためにも重要なポイントです。

この記事でわかること

option selected属性の使い方
option selected属性のサンプルコード
option selectedのよくある質問

1 option selected属性とは？
2 option selected属性の使い方
- 2.1 基本的な使い方
- 2.2 JavaScriptで動的に設定
3 よくある問題と解決策
- 3.1 1. 初期値が設定されない
  - 3.1.1 原因
  - 3.1.2 解決策
- 3.2 2. 複数のoption要素が選択される
  - 3.2.1 原因
  - 3.2.2 解決策
4 まとめ
5 投稿者

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>