selectObject.optionsは、ドロップダウンリスト（select要素）内の選択肢（option要素）のコレクション。
構文
$selectElementReference.options;
例
$selectElementReference.options[0]; // １つ目の選択肢への参照
$selectElementReference.options[1]; // ２つ目の選択肢への参照
$selectElementReference.options[0].value; // １つ目の選択肢の値
$selectElementReference.options[1]; // ２つ目の選択肢への参照
$selectElementReference.options[0].value; // １つ目の選択肢の値
サンプル
現在選択中の選択肢のインデックス：
現在選択中の選択肢の値：
ドロップダウンリスト：
サンプルの動作について
- 「0」ボタンをクリックすると、ドロップダウンリストの「選択肢１」を選択する。「現在選択中の選択肢のインデックス：」の右横に「0」、「現在選択中の選択肢の値：」の右横に「選択肢１」と表示する。
- 「1」ボタンをクリックすると、ドロップダウンリストの「選択肢２」を選択する。「現在選択中の選択肢のインデックス：」の右横に「1」、「現在選択中の選択肢の値：」の右横に「選択肢２」と表示する。
- 「2」ボタンをクリックすると、ドロップダウンリストの「選択肢３」を選択する。「現在選択中の選択肢のインデックス：」の右横に「2」、「現在選択中の選択肢の値：」の右横に「選択肢３」と表示する。
- 「3」ボタンをクリックすると、ドロップダウンリストの「選択肢４」を選択する。「現在選択中の選択肢のインデックス：」の右横に「3」、「現在選択中の選択肢の値：」の右横に「選択肢４」と表示する。
- 「4」ボタンをクリックすると、ドロップダウンリストの「選択肢５」を選択する。「現在選択中の選択肢のインデックス：」の右横に「4」、「現在選択中の選択肢の値：」の右横に「選択肢５」と表示する。
- 「全て選択」ボタンをクリックすると、ドロップダウンリストの全ての選択肢を選択する。「現在選択中の選択肢のインデックス：」の右横に「0, 1, 2, 3, 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 setSelectedAll() {
var $elementReference = document.getElementById( "sample" );
var $selectedIndex = "";
var $value = "";
for( var $index = 0; $index < $elementReference.length; $index++ ){
$elementReference.options[$index].selected = true;
$selectedIndex += $index + ", ";
$value += $elementReference.options[$index].value + ", ";
}
document.getElementById( "sampleOutputIndex" ).innerHTML = $selectedIndex;
document.getElementById( "sampleOutputValue" ).innerHTML = $value;
}
function getSelected() {
var $elementReference = document.getElementById( "sample" );
var $selectedIndex = "";
var $value = "";
for( var $index = 0; $index < $elementReference.length; $index++ ){
if( $elementReference.options[$index].selected == true ) {
$selectedIndex += $index + ", ";
$value += $elementReference.options[$index].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 setSelectedAll() {
var $elementReference = document.getElementById( "sample" );
var $selectedIndex = "";
var $value = "";
for( var $index = 0; $index < $elementReference.length; $index++ ){
$elementReference.options[$index].selected = true;
$selectedIndex += $index + ", ";
$value += $elementReference.options[$index].value + ", ";
}
document.getElementById( "sampleOutputIndex" ).innerHTML = $selectedIndex;
document.getElementById( "sampleOutputValue" ).innerHTML = $value;
}
function getSelected() {
var $elementReference = document.getElementById( "sample" );
var $selectedIndex = "";
var $value = "";
for( var $index = 0; $index < $elementReference.length; $index++ ){
if( $elementReference.options[$index].selected == true ) {
$selectedIndex += $index + ", ";
$value += $elementReference.options[$index].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>
<button onclick="setSelectedAll();">全て選択</button>
</p>
<p>現在選択中の選択肢のインデックス：<span id="sampleOutputIndex"></span></p>
<p>現在選択中の選択肢の値：<span id="sampleOutputValue"></span></p>
<p>
ドロップダウンリスト：
<select id="sample" onchange="getSelected()" multiple>
<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>
<button onclick="setSelectedAll();">全て選択</button>
</p>
<p>現在選択中の選択肢のインデックス：<span id="sampleOutputIndex"></span></p>
<p>現在選択中の選択肢の値：<span id="sampleOutputValue"></span></p>
<p>
ドロップダウンリスト：
<select id="sample" onchange="getSelected()" multiple>
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３" selected>選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
</p>