JavaScriptでセレクトボックス（select要素）の値をプログラムから設定する方法

JavaScriptを使えば、セレクトボックス（<select>要素）の選択値を簡単にプログラムから操作できます。本記事では、基本的な手順を具体的なコード例とともにわかりやすく解説します。

まず、次のようなセレクトボックスがHTML内に定義されているとします。

<select id="my-select">
   <option value="1">選択してください</option>
   <option value="2">りんご</option>
   <option value="3">いちご</option>
   <option value="4">さくらんぼ</option>
   <option value="5">グアバ</option>
</select>

このセレクト要素の値を設定するには、まず querySelector メソッドで対象の要素を取得し、続いて value プロパティに目的の値を代入します。たとえば、値を「3」（いちご）に設定したい場合は、以下のように記述します。

実装例

// セレクトボックスを取得
const mySelectBox = document.querySelector('#my-select');
// 値を「3」（いちご）に設定
mySelectBox.value = 3;

注意点：optionのvalue属性との一致

value プロパティに代入する値は、対応する <option> の value 属性と一致している必要があります。一致するoptionが存在しない場合、選択状態は変化しないか、空欄になりますので注意しましょう。

別の方法：selectedIndexを使う

値ではなく、選択肢の順番（インデックス）で指定したい場合は、selectedIndex プロパティを使用します。インデックスは0から始まるため、たとえば3番目の項目（いちご）を選択する場合は以下のようになります。

// インデックスは0始まり（3番目の項目を選択）
mySelectBox.selectedIndex = 2;

このように、JavaScriptでは value プロパティまたは selectedIndex プロパティを使うことで、ユーザーの操作なしにセレクトボックスの選択状態を自由に制御できます。フォームの初期値設定や動的なUIの実装にぜひ活用してください。