optionObject.selectedは、選択肢（option要素）が選択状態かどうかを取得、もしくは、設定するプロパティ。
構文
取得
var $selected = $optionElementReference.selected;
戻り値
- 選択肢（option要素）が選択状態であれば、
trueを返す。 - 選択肢（option要素）が選択状態でなければ、
falseを返す。
設定
$optionElementReference.selected = boolean;
- boolean
- 選択状態にするかどうかを指定。
true：選択状態にする。false：選択状態にしない。
サンプル
ドロップダウンリストＢ：
- 選択肢１：
- 選択肢２：
- 選択肢３：
- 選択肢４：
- 選択肢５：
サンプルの動作について
- 「選択肢１を選択状態に」ボタンをクリックすると、選択肢１を選択状態にする。
- 「選択肢２を選択状態に」ボタンをクリックすると、選択肢２を選択状態にする。
- 「選択肢１：」から「選択肢５：」の各右横には、各選択肢が選択状態であれば「true」、選択状態でなければ「false」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setSelected( $index ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.options[$index].selected = true;
getSelected();
}
function getSelected() {
var $elementReference = document.getElementById( "sample" );
for( var $index = 0; $index < $elementReference.options.length; $index++ ){
document.getElementById( "sampleOutput" + ( $index + 1 ) ).innerHTML = $elementReference.options[$index].selected;
}
}
window.onload = function () {
getSelected();
}
</script>
function setSelected( $index ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.options[$index].selected = true;
getSelected();
}
function getSelected() {
var $elementReference = document.getElementById( "sample" );
for( var $index = 0; $index < $elementReference.options.length; $index++ ){
document.getElementById( "sampleOutput" + ( $index + 1 ) ).innerHTML = $elementReference.options[$index].selected;
}
}
window.onload = function () {
getSelected();
}
</script>
HTML
<p>
<button onclick="setSelected(0);">選択肢１を選択状態に</button>
<button onclick="setSelected(1);">選択肢２を選択状態に</button>
</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>
<ul>
<li>選択肢１：<span id="sampleOutput1"></span></li>
<li>選択肢２：<span id="sampleOutput2"></span></li>
<li>選択肢３：<span id="sampleOutput3"></span></li>
<li>選択肢４：<span id="sampleOutput4"></span></li>
<li>選択肢５：<span id="sampleOutput5"></span></li>
</ul>
<button onclick="setSelected(0);">選択肢１を選択状態に</button>
<button onclick="setSelected(1);">選択肢２を選択状態に</button>
</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>
<ul>
<li>選択肢１：<span id="sampleOutput1"></span></li>
<li>選択肢２：<span id="sampleOutput2"></span></li>
<li>選択肢３：<span id="sampleOutput3"></span></li>
<li>選択肢４：<span id="sampleOutput4"></span></li>
<li>選択肢５：<span id="sampleOutput5"></span></li>
</ul>