optionObject.defaultSelectedは、選択肢（option要素）が初期選択状態かどうかを取得、もしくは、設定するプロパティ。
構文
取得
var $defaultSelected = $optionElementReference.defaultSelected;
戻り値
- 選択肢（option要素）が初期選択状態であれば、
trueを返す。 - 選択肢（option要素）が初期選択状態でなければ、
falseを返す。
設定
$optionElementReference.defaultSelected = boolean;
- boolean
- 初期選択状態にするかどうかを指定。
true：初期選択状態にする。false：初期選択状態にしない。
サンプル１
現在選択中の選択肢：
ドロップダウンリストＡ：
サンプルの動作について
- ドロップダウンリストＡの「選択肢１」「選択肢２」「選択肢４」「選択肢５」を選択すると、「現在選択中の選択肢：」の右横に「false」と表示する。
- ドロップダウンリストＡの「選択肢３」を選択すると、「現在選択中の選択肢：」の右横に「true」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function getDefaultSelected() {
var $elementReference = document.getElementById( "sampleA" );
var $options = $elementReference.getElementsByTagName("option");
var $selectedIndex = $elementReference.selectedIndex;
var $defaultSelected = $options[$selectedIndex].defaultSelected;
document.getElementById( "sampleOutput" ).innerHTML = $defaultSelected;
}
</script>
function getDefaultSelected() {
var $elementReference = document.getElementById( "sampleA" );
var $options = $elementReference.getElementsByTagName("option");
var $selectedIndex = $elementReference.selectedIndex;
var $defaultSelected = $options[$selectedIndex].defaultSelected;
document.getElementById( "sampleOutput" ).innerHTML = $defaultSelected;
}
</script>
HTML
<p>現在選択中の選択肢：<span id="sampleOutput"></span></p>
<p>
ドロップダウンリストＡ：
<select id="sampleA" onchange="getDefaultSelected()">
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３" selected>選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
</p>
<p>
ドロップダウンリストＡ：
<select id="sampleA" onchange="getDefaultSelected()">
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３" selected>選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
</p>
サンプル２
ドロップダウンリストＢ：
サンプルの動作について
- 「選択肢１を初期選択状態に」ボタンをクリックすると、選択肢１のoption要素にselected属性を追加し、初期選択状態にする。
- 「選択肢２を初期選択状態に」ボタンをクリックすると、選択肢２のoption要素にselected属性を追加し、初期選択状態にする。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setDefaultSelected( $index ) {
var $elementReference = document.getElementById( "sampleB" );
var $options = $elementReference.getElementsByTagName("option");
$options[$index].defaultSelected = true;
}
</script>
function setDefaultSelected( $index ) {
var $elementReference = document.getElementById( "sampleB" );
var $options = $elementReference.getElementsByTagName("option");
$options[$index].defaultSelected = true;
}
</script>
HTML
<p>
<button onclick="setDefaultSelected(0);">選択肢１を初期選択状態に</button>
<button onclick="setDefaultSelected(1);">選択肢２を初期選択状態に</button>
</p>
<p>
ドロップダウンリストＢ：
<select id="sampleB" multiple>
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３" selected>選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
</p>
<button onclick="setDefaultSelected(0);">選択肢１を初期選択状態に</button>
<button onclick="setDefaultSelected(1);">選択肢２を初期選択状態に</button>
</p>
<p>
ドロップダウンリストＢ：
<select id="sampleB" multiple>
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３" selected>選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
</p>