selectObject.selectedIndexは、ドロップダウンリスト（select要素）内の選択肢（option要素）のうち、選択済み選択肢（option要素）のインデックス番号を取得、もしくは、設定するプロパティ。
選択肢のインデックス番号は、「0」から始まる点に注意。
構文
取得
var $selectedIndex = $selectElementReference.selectedIndex;
戻り値
ドロップダウンリスト（select要素）内の選択肢（option要素）のうち、選択した選択肢（option要素）のインデックス番号。
設定
$selectElementReference.selectedIndex = index;
- index
- 選択したい選択肢（option要素）のインデックス番号。
サンプル
現在選択中の選択肢のインデックス：
現在選択中の選択肢の値：
ドロップダウンリスト：
サンプルの動作について
- 「0」ボタンをクリックすると、ドロップダウンリストの「選択肢１」を選択する。「現在選択中の選択肢のインデックス：」の右横に「0」、「現在選択中の選択肢の値：」の右横に「選択肢１」と表示する。
- 「1」ボタンをクリックすると、ドロップダウンリストの「選択肢２」を選択する。「現在選択中の選択肢のインデックス：」の右横に「1」、「現在選択中の選択肢の値：」の右横に「選択肢２」と表示する。
- 「2」ボタンをクリックすると、ドロップダウンリストの「選択肢３」を選択する。「現在選択中の選択肢のインデックス：」の右横に「2」、「現在選択中の選択肢の値：」の右横に「選択肢３」と表示する。
- 「3」ボタンをクリックすると、ドロップダウンリストの「選択肢４」を選択する。「現在選択中の選択肢のインデックス：」の右横に「3」、「現在選択中の選択肢の値：」の右横に「選択肢４」と表示する。
- 「4」ボタンをクリックすると、ドロップダウンリストの「選択肢５」を選択する。「現在選択中の選択肢のインデックス：」の右横に「4」、「現在選択中の選択肢の値：」の右横に「選択肢５」と表示する。
- ドロップダウンリストの選択を変更すると、「現在選択中の選択肢のインデックス：」の右横に、選択した選択肢のインデックス番号を全て表示する。「現在選択中の選択肢の値：」の右横に、選択した選択肢の値（value属性値）を全て表示する。。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setSelected( $selectedIndex ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.selectedIndex = $selectedIndex;
var $value = $elementReference.options[$selectedIndex].value;
document.getElementById( "sampleOutputIndex" ).innerHTML = $selectedIndex;
document.getElementById( "sampleOutputValue" ).innerHTML = $value;
}
function getSelected() {
var $elementReference = document.getElementById( "sample" );
var $selectedIndex = $elementReference.selectedIndex;
var $value = $elementReference.options[$selectedIndex].value;
document.getElementById( "sampleOutputIndex" ).innerHTML = $selectedIndex;
document.getElementById( "sampleOutputValue" ).innerHTML = $value;
}
</script>
function setSelected( $selectedIndex ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.selectedIndex = $selectedIndex;
var $value = $elementReference.options[$selectedIndex].value;
document.getElementById( "sampleOutputIndex" ).innerHTML = $selectedIndex;
document.getElementById( "sampleOutputValue" ).innerHTML = $value;
}
function getSelected() {
var $elementReference = document.getElementById( "sample" );
var $selectedIndex = $elementReference.selectedIndex;
var $value = $elementReference.options[$selectedIndex].value;
document.getElementById( "sampleOutputIndex" ).innerHTML = $selectedIndex;
document.getElementById( "sampleOutputValue" ).innerHTML = $value;
}
</script>
HTML
<p>
<button onclick="setSelected(0);">0</button>
<button onclick="setSelected(1);">1</button>
<button onclick="setSelected(2);">2</button>
<button onclick="setSelected(3);">3</button>
<button onclick="setSelected(4);">4</button>
</p>
<p>現在選択中の選択肢のインデックス：<span id="sampleOutputIndex"></span></p>
<p>現在選択中の選択肢の値：<span id="sampleOutputValue"></span></p>
<p>
ドロップダウンリスト：
<select id="sample" onchange="getSelected()">
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３" selected>選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
</p>
<button onclick="setSelected(0);">0</button>
<button onclick="setSelected(1);">1</button>
<button onclick="setSelected(2);">2</button>
<button onclick="setSelected(3);">3</button>
<button onclick="setSelected(4);">4</button>
</p>
<p>現在選択中の選択肢のインデックス：<span id="sampleOutputIndex"></span></p>
<p>現在選択中の選択肢の値：<span id="sampleOutputValue"></span></p>
<p>
ドロップダウンリスト：
<select id="sample" onchange="getSelected()">
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３" selected>選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
</p>