“option”标签的“selected”属性中可以出现什么值？

Question

我有一些类似于以下的标记：

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

在这种情况下，“橙色”显示为所选项目。我原以为将 selected 属性设为空白会取消其效果。有没有一种方法可以在不简单地省略属性的情况下编写它？

原文由 Travis Beale 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不同的浏览器可能会以不同方式处理此属性。根据 MSDN 文档（适用于 Internet Explorer）：

要选择 HTML 中的项目，不必将 SELECTED 属性的值设置为 true。 SELECTED 属性的存在本身就将其值设置为 true。

在 firefox 和 Safari 中这确实有效：

 <option selected='false' />

通过查看 HTML4 的官方 WC3 标准，我可以看出，受支持的情况只有：

 <option selected='selected' />

您将需要有选择地发出属性，或者使用 javascript 来控制最初选择的项目。

原文由 LBushkin 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

HTML5规范

https://www.w3.org/TR/html51/sec-forms.html#the-option-element

所选内容属性是一个布尔属性。

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes ：

元素上存在布尔属性表示真值，不存在该属性表示假值。

如果该属性存在，其值必须是空字符串或者是不区分大小写的 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> 因为它更短。

原文由 Ciro Santilli OurBigBook.com 发布，翻译遵循 CC BY-SA 4.0 许可协议