JavaScriptでセレクトボックスの値を取得設定する方法｜初心者向けフォーム操作完全解説

1. セレクトボックスとは何か

1. セレクトボックスとは何か

セレクトボックスとは複数の選択肢の中から一つを選ぶためのフォーム部品です。買い物サイトの配送方法選択や会員登録画面の都道府県選択などでよく使われています。プルダウンメニューとも呼ばれます。

JavaScriptのフォーム操作ではこのセレクトボックスの値を取得したり設定したりできます。フォーム操作とは画面上の入力部品をプログラムで動かす技術のことです。Web制作やフロントエンド開発では必須の知識です。

初心者の方はまずセレクトボックスがどのような構造で作られているのかを理解することが大切です。

2. HTMLでのセレクトボックスの基本構造

2. HTMLでのセレクトボックスの基本構造

セレクトボックスはselectタグとoptionタグで構成されます。selectが全体の箱でoptionが選択肢です。valueは実際にプログラムで扱う値です。

<select id="pref">
  <option value="tokyo">東京</option>
  <option value="osaka">大阪</option>
  <option value="fukuoka">福岡</option>
</select>
<button type="button" onclick="getValue()">取得</button>

この構造を理解するとJavaScriptでの値操作が簡単になります。

3. valueプロパティで選択値を取得する方法

3. valueプロパティで選択値を取得する方法

セレクトボックスの現在選ばれている値を取得するにはvalueプロパティを使用します。プロパティとは部品が持つ情報のことです。

function getValue() {
  var value = document.getElementById("pref").value;
  alert(value);
}

このコードでは現在選択されているoptionのvalueが表示されます。初心者の方はまずvalueで取得できることを覚えましょう。

4. セレクトボックスの値を設定する方法

4. セレクトボックスの値を設定する方法

JavaScriptではセレクトボックスの値を自動で設定することもできます。例えば登録済みデータを画面に反映させる場合に使われます。

function setValue() {
  document.getElementById("pref").value = "osaka";
}

valueに指定した値と同じoptionが自動的に選択されます。これはフォーム自動入力機能の基本です。

5. selectedIndexを使った取得と設定

5. selectedIndexを使った取得と設定

selectedIndexとは選択されている番号を表す情報です。番号は上から順番に数えます。最初は零番目です。番号で管理したい場合に便利です。

var select = document.getElementById("pref");
var index = select.selectedIndex;
alert(index);

select.selectedIndex = 2;

このように番号で取得や設定も可能です。状況に応じてvalueとselectedIndexを使い分けます。

6. optionのtextを取得する方法

6. optionのtextを取得する方法

表示されている文字を取得したい場合はoptions配列を使います。配列とは複数の値を順番に保存できる仕組みです。

var select = document.getElementById("pref");
var text = select.options[select.selectedIndex].text;
alert(text);

textは画面に表示される文字列です。valueとは違う場合があるため注意が必要です。

7. changeイベントで動的に処理する

7. changeイベントで動的に処理する

イベントとは操作が行われたときに発生する仕組みです。changeイベントは選択が変更されたときに実行されます。動的とはその場の操作に応じて変わるという意味です。

document.getElementById("pref").addEventListener("change", function() {
  alert(this.value);
});

このように設定すると選択が変わるたびに値を取得できます。ユーザー体験向上に役立つ重要な技術です。

8. セレクトボックス操作の実務活用例

8. セレクトボックス操作の実務活用例

JavaScriptでのセレクトボックス値取得や設定は会員登録画面、検索フォーム、管理画面など多くのWebアプリケーションで利用されています。フォーム値取得、フォーム値設定、プルダウン操作はフロントエンド開発の基礎です。

初心者の方はまずvalueの取得と設定を確実に理解し、その後selectedIndexやtext取得に挑戦しましょう。基礎を積み重ねることで実務レベルのフォーム操作が可能になります。

繰り返し練習することでJavaScriptのフォーム操作が自然に身につきます。セレクトボックス操作はWeb開発に欠かせない重要な知識です。