このページについて
このページではHTMLで使う事ができるselected属性の機能と使い方を解説しています。
selected属性
selected属性はoptionタグでのみ使う事ができる属性です。この属性はページが読み込まれた時に自動的に選択済みにする事ができる属性になります。
selected属性の書き方
selected属性は付与するだけで機能するブール値属性となります。
<select>
<option value="A">項目1</option>
<option value="B">項目2</option>
<option value="C" selected>項目3</option>
</select>このように設定する事でページ読み込みと同時に項目3が初期選択済みとなります。
JavaScriptでselected属性を付与
JavaScriptでselected属性を付与するには以下のように書くのが楽かなと思います。
document.getElementById('test')[1].selected = true;この場合、testというidの1番目にselected属性を付与するという書き方になります。idはselectタグのidを指定します。全体像を書くと以下のようになります。
<select id="list1">
<optgroup label="poke">
<option value="カメックス">カメックス</option>
<option value="オーダイル">オーダイル</option>
</optgroup>
<optgroup label="kori">
<option value="ラプラス">ラプラス</option>
<option value="フリーザー">フリーザー</option>
</optgroup>
</select>
<button type="submit">ssssss</button>
</form>
<script>
var x = document.getElementById('list1')[1].selected = true;
</script>selectタグのid属性(list1)を指定しているため、その[1]を指定してselected属性を付与しています。0番目がカメックス、1番目がオーダイルなのでページ読み込みと同時にオーダイルの項目が選択済みとなっています。
まとめ
selected属性はページ読み込みと同時に選択済みにするというシンプルな機能です。これはoptionタグでのみ使えるため、あまり出番が無いのも事実ではあります。
JavaScriptで動的に変更することもできますが、それが活きるのも状況としては限られているので「そういう事ができる」ぐらいで良いと思います。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。