この記事で分かること
selectedIndexの基本的な役割- 選択されている項目番号の取得方法
- 番号（インデックス）の仕組み
- 実際のフォーム例での動作確認
selectedIndex は、セレクトメニュー（<select>）で現在選択されている項目の番号（インデックス）を取得するためのプロパティです。
最初の項目は 0 番から始まり、選択状態の判定や条件分岐に利用できます。
selectedIndex とは？（基礎）
selectedIndex は、セレクトメニュー内で選択されている <option> の番号を返します。
- 最初の項目 → 0
- 2番目の項目 → 1
- 3番目の項目 → 2
選択されている項目を判定したり、選択内容に応じた処理を行う際に便利です。
選択されている項目番号を取得する方法
フォーム名 form1 のセレクトメニュー s01 で選択されている項目番号を取得する例です。
listn = document.form1.s01.selectedIndex;
→ 選択されている項目の番号が listn に代入されます。
実際のフォーム例
<form name="form1">
<select name="s01">
<option>選択肢1</option>
<option>選択肢2</option>
<option>選択肢3</option>
</select>
<br><br>
<input type="button" value="選択番号を表示"
onclick="alert(document.form1.s01.selectedIndex)">
</form>
→ ボタンを押すと、現在選択されている項目の番号が表示されます。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- フォーム操作や DOM の基礎を順序立てて理解したい
selectedIndex のような
「セレクトメニューの選択状態を扱う処理」は、DOM・フォーム要素・イベントの基礎理解が欠かせません。
書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
セレクトメニューやフォーム要素の扱い方など、
selectedIndex の理解に直結する基礎が丁寧に解説されています。
この本で解決できること：
- フォーム要素の仕組みを視覚的に理解できる
- DOM を使った選択状態の取得・変更の基礎が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
セレクトメニューの選択処理・イベント処理・DOM 操作など、
selectedIndex の理解に必要な基礎力がしっかり身につきます。
この本で解決できること：
- 選択状態の仕組みを体系的に理解できる
- DOM を使ったフォーム制御の基礎が身につく
- 現代的な JavaScript の書き方をまとめて習得
動画で理解を深めたい方へ（Udemy講座）
selectedIndex のような
「選択された項目番号の取得」は、実際の動きを動画で見ると理解が一気に深まります。
Udemy ではフォーム操作・DOM・イベント処理を丁寧に解説した講座が多数あります。
初心者のためのJavaScript 完全入門
JavaScriptの基礎を体系的に学べる人気講座です。
セレクトメニューの仕組みや、選択状態の取得・変更など、
selectedIndex の理解に役立つ内容がしっかり扱われています。
この講座で解決できること：
- フォーム操作の流れを視覚的に理解できる
selectedIndexを使った選択処理の基礎が分かる- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、フォーム制御や DOM 操作を深く理解したい方に最適です。
selectedIndex を使った実務的な UI 制御も学べます。
この講座で解決できること：
- 選択状態の取得・変更など実務的なフォーム制御が身につく
- DOM とイベントを組み合わせた UI 操作を理解できる
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- セレクトメニューの選択番号の扱いが曖昧なまま進んでしまう
- DOM 操作の基礎が理解しきれない
- イベント処理とフォーム制御の関係がつかみにくい
- コードレビューを受ける機会がない
スクールでは、プロの講師が学習ロードマップを作成し、
selectedIndex を含むフォーム操作の基礎を
丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすいフォーム操作のポイントを事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
selectedIndex に関するよくある質問（FAQ）
selectedIndex の番号は必ず 0 から始まる？
はい。セレクトメニューの最初の項目は必ず 0 番になります。
selectedIndex を使って選択項目を変更できる？
はい。selectElem.selectedIndex = 1 のように代入すれば選択項目を変更できます。
selectedIndex と selected の違いは？
selectedIndex は番号を返し、selected は true / false を返します。
選択されていない場合の selectedIndex は？
通常は必ずいずれかの項目が選択されているため -1 にはなりませんが、特殊なケースでは -1 が返ることがあります。
まとめ
selectedIndexはセレクトメニューで選択されている項目番号を返すプロパティ- 番号は 0 から始まる
- 選択内容に応じた処理に便利
- フォーム操作の基本として覚えておくと役立つ
