optionObject.indexは、選択肢(option要素)のインデックス番号を取得するプロパティ。
選択肢のインデックス番号は、「0」から始まる点に注意。
構文
取得
var $index = $optionElementReference.index;
戻り値
選択肢(option要素)のインデックス番号。
サンプル
ドロップダウンリスト:
選択した選択肢のインデックス番号:
選択した選択肢のテキスト:
選択した選択肢の値:
サンプルの動作について
ドロップダウンリストの選択肢を選択すると、選択した選択肢のインデックス番号、テキスト、値を、表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function getIndex() {
var $elementReference = document.getElementById( "sample" );
document.getElementById( "sampleOutputIndex" ).innerHTML = $elementReference.options[$elementReference.selectedIndex].index;
document.getElementById( "sampleOutputText" ).innerHTML = $elementReference.options[$elementReference.selectedIndex].text;
document.getElementById( "sampleOutputValue" ).innerHTML = $elementReference.options[$elementReference.selectedIndex].value;
}
window.onload = function () {
getIndex();
}
</script>
function getIndex() {
var $elementReference = document.getElementById( "sample" );
document.getElementById( "sampleOutputIndex" ).innerHTML = $elementReference.options[$elementReference.selectedIndex].index;
document.getElementById( "sampleOutputText" ).innerHTML = $elementReference.options[$elementReference.selectedIndex].text;
document.getElementById( "sampleOutputValue" ).innerHTML = $elementReference.options[$elementReference.selectedIndex].value;
}
window.onload = function () {
getIndex();
}
</script>
HTML
<p>
ドロップダウンリスト:
<select id="sample" onchange="getIndex()">
<option value="選択肢1の値">選択肢1</option>
<option value="選択肢2の値">選択肢2</option>
<option value="選択肢3の値" selected>選択肢3</option>
<option value="選択肢4の値">選択肢4</option>
<option value="選択肢5の値">選択肢5</option>
</select>
</p>
<p>
選択した選択肢のインデックス番号:<span id="sampleOutputIndex"></span>
</p>
<p>
選択した選択肢のテキスト:<span id="sampleOutputText"></span>
</p>
<p>
選択した選択肢の値:<span id="sampleOutputValue"></span>
</p>
ドロップダウンリスト:
<select id="sample" onchange="getIndex()">
<option value="選択肢1の値">選択肢1</option>
<option value="選択肢2の値">選択肢2</option>
<option value="選択肢3の値" selected>選択肢3</option>
<option value="選択肢4の値">選択肢4</option>
<option value="選択肢5の値">選択肢5</option>
</select>
</p>
<p>
選択した選択肢のインデックス番号:<span id="sampleOutputIndex"></span>
</p>
<p>
選択した選択肢のテキスト:<span id="sampleOutputText"></span>
</p>
<p>
選択した選択肢の値:<span id="sampleOutputValue"></span>
</p>