html - 「option」タグの「selected」属性にはどのような値が表示されますか？

Question

次のようなマークアップがあります。

<select>
  <option selected="selected">Apple</option>
  <option selected="">Orange</option>
</select>

この場合、「オレンジ」が選択項目として表示されます。selected属性を空白にすると、その効果が元に戻ると思っていました。単に属性を除外せずにこれを書く方法はありますか？

score 39 · Accepted Answer

HTML5仕様

選択されたコンテンツ属性はブール属性です。

要素にブール属性が存在する場合は真の値を表し、属性が存在しない場合は偽の値を表します。

属性が存在する場合、その値は空の文字列か、属性の正規名とASCIIの大文字と小文字を区別しない一致であり、先頭または末尾に空白がない値である必要があります。

結論

以下は、有効で、同等で、真です。

<option selected />
<option selected="" />
<option selected="selected" />
<option selected="SeLeCtEd" />

以下は無効です：

<option selected="0" />
<option selected="1" />
<option selected="false" />
<option selected="true" />

falseの有効な構文は、属性がないことだけです。

<option />

おすすめ

有効なXHTMLの記述に関心がある場合は、を使用selected="selected"してください。これ<option selected>は無効であり、他の選択肢は読みにくいためです。それ以外の<option selected>場合は、短いので使用してください。

score 32 · Accepted Answer

ブラウザが異なれば、この属性の扱いも異なります。MSDNのドキュメント（Internet Explorer用）によると：

HTMLで項目を選択するために、SELECTED属性の値をtrueに設定する必要はありません。SELECTED属性が存在するだけで、その値がtrueに設定されます。

FirefoxとSafariでは、これは機能します。

<option selected='false' />

HTML4の公式WC3標準を見るとわかることから、サポートされているケースは次のとおりです。

<option selected='selected' />

属性を選択的に発行するか、javascriptを使用して最初に選択されるアイテムを制御する必要があります。

score 7 · Accepted Answer

XHTMLで選択された属性に許可される唯一の値は「選択済み」であるため、マークアップをXHTMLに準拠させ、すべてのブラウザーで機能させる場合は、マークアップを除外することが唯一の選択肢です。

score 5 · Accepted Answer

HTML（XHTMLとは対照的に）selectedでは、値がまったくない単純な属性が正常に機能します。

<option selected>Apple</option>
<option>Orange</option>

XHTML（XHTML5を含む）では、値が必要です。これも次のようになりますselected。

<option selected="selected">Apple</option>
<option>Orange</option>

これはHTMLでも正常に機能します。

これは通常、（X）HTMLのブール値に当てはまります。それらをfalseに設定する方法は、それらを完全に省略することです。trueとの値の設定falseは機能する可能性がありますが、非標準です。

オプションのリストでは、デフォルトで最初のものが選択されているため、この場合、これはまったく必要ありません。

score 4 · Accepted Answer

いいえ、選択された属性の存在は、それが選択されたアイテムであることをブラウザに通知します。引用符内はすべて無視されます。

編集：（Javascriptを使用して）実行できることは、selected = ""のオプションタグを探し、選択した属性をそれらから削除することです。

score 0 · Accepted Answer

w3schoolsによると、selected="selected"として設定する必要があります。これにより、最初に選択されたオプションがわかり、後でスクリプトを使用して設定できます。

score 0 · Accepted Answer

その属性に「選択済み」以外の有効な値はありません。（http://www.w3schools.com/TAGS/att_option_selected.asp）

score -2 · Accepted Answer

javascriptからselectElement.selectedIndexプロパティを設定するか、属性を完全に削除することをお勧めします。

8 に答える 8