optionObject.selectedは、選択肢(option要素)が選択状態かどうかを取得、もしくは、設定するプロパティ。
構文
取得
var $selected = $optionElementReference.selected;
戻り値
- 選択肢(option要素)が選択状態であれば、
true
を返す。 - 選択肢(option要素)が選択状態でなければ、
false
を返す。
設定
$optionElementReference.selected = boolean;
- boolean
- 選択状態にするかどうかを指定。
true
:選択状態にする。false
:選択状態にしない。
サンプル
ドロップダウンリストB:
- 選択肢1:
- 選択肢2:
- 選択肢3:
- 選択肢4:
- 選択肢5:
サンプルの動作について
- 「選択肢1を選択状態に」ボタンをクリックすると、選択肢1を選択状態にする。
- 「選択肢2を選択状態に」ボタンをクリックすると、選択肢2を選択状態にする。
- 「選択肢1:」から「選択肢5:」の各右横には、各選択肢が選択状態であれば「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);">選択肢1を選択状態に</button>
<button onclick="setSelected(1);">選択肢2を選択状態に</button>
</p>
<p>
ドロップダウンリストB:
<select id="sample" onchange="getSelected()" multiple>
<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>
<ul>
<li>選択肢1:<span id="sampleOutput1"></span></li>
<li>選択肢2:<span id="sampleOutput2"></span></li>
<li>選択肢3:<span id="sampleOutput3"></span></li>
<li>選択肢4:<span id="sampleOutput4"></span></li>
<li>選択肢5:<span id="sampleOutput5"></span></li>
</ul>
<button onclick="setSelected(0);">選択肢1を選択状態に</button>
<button onclick="setSelected(1);">選択肢2を選択状態に</button>
</p>
<p>
ドロップダウンリストB:
<select id="sample" onchange="getSelected()" multiple>
<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>
<ul>
<li>選択肢1:<span id="sampleOutput1"></span></li>
<li>選択肢2:<span id="sampleOutput2"></span></li>
<li>選択肢3:<span id="sampleOutput3"></span></li>
<li>選択肢4:<span id="sampleOutput4"></span></li>
<li>選択肢5:<span id="sampleOutput5"></span></li>
</ul>