“option”标签的“selected”属性中可以出现哪些值？答案

【问题标题】：What values can appear in the "selected" attribute of the "option" tag?“option”标签的“selected”属性中可以出现哪些值？
【发布时间】：2010-11-05 06:12:02
【问题描述】：

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

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

在这种情况下，“橙色”显示为所选项目。我本来希望将selected 属性设为空白会撤消其效果。有没有办法写这个而不简单地忽略属性？

【问题讨论】：

标签： html xhtml option selected

【解决方案1】：

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>，因为它更短。

【讨论】：

【解决方案2】：

在 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 的值可能有效，但不是标准的。

请注意，对于选项列表，默认情况下会选择第一个，因此在这种情况下根本不需要。

【讨论】：

【解决方案3】：

XHTML 中 selected 属性的唯一允许值是“selected”，因此如果您希望您的标记符合 XHTML 并在所有浏览器中工作，则将其排除在外是使其不被选中的唯一选择

【讨论】：

【解决方案4】：

该属性除了“已选择”之外没有任何其他有效值。 (http://www.w3schools.com/TAGS/att_option_selected.asp)

【讨论】：

【解决方案5】：

不同的浏览器可能会以不同的方式对待这个属性。根据 MSDN 文档（针对 Internet Explorer）：

要在 HTML 中选择一个项目，它不是需要设置的值 SELECTED 属性为 true。仅仅是 SELECTED 属性集的存在其值为 true。

在 Firefox 和 Safari 中这确实有效：

<option selected='false' />

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

<option selected='selected' />

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

【讨论】：

-1;这种说法是错误的：“根据我通过查看 HTML4 的官方 WC3 标准可以看出，支持的情况仅为：<option selected='selected' />” 相反，w3.org/TR/html4/interact/forms.html#adef-selected 声明 selected 为是一个布尔属性，w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 解释说，仅仅是布尔属性的外观意味着“真”或“假”的值。 <OPTION selected>其实就是一个例子！

【解决方案6】：

最好从 Javascript 中设置 selectElement.selectedIndex 属性，或者完全删除该属性。

【讨论】：

投反对票原因：不明白为什么在标记中支持的 JS 中做一些事情会更好。
@WaldenLeverich 首先，这是一个非常古老的问题：HTML5 和“现代”浏览器并不存在，因此兼容层是 JS。其次，我提到了删除属性：禁用选择的唯一一致方法。
@Jeff：“这是一个非常古老的问题：HTML5 和“现代”浏览器并不存在”——the HTML5 spec certainly did 和 work on it had been ongoing for some years。
@PaulD.Waite 谢谢！如果您再坚持几年，我会确保我的编辑反映了您显然非常宝贵的评论，包括指向维基百科中the timeline 的链接。与此同时，我将忙于纠正所有其他在互联网上发布错误消息的人……说真的。严重地？对一个 8 岁的答案的旧评论？
@PaulD.Waite 实际上，请不要再花时间在这上面了。我们的时间最好花在纠正现实世界中的实际问题上。

【解决方案7】：

根据w3schools，您应该将其设置为：selected="selected"。这会告诉您最初选择了哪个选项，并允许您稍后通过脚本进行设置。

【讨论】：

【解决方案8】：

不，selected 属性的存在告诉浏览器它是被选中的项目。引号内的任何内容都会被忽略。

编辑：您可以做的（使用 Javascript）是查找带有 selected="" 的选项标签，并从中删除 selected 属性。

【讨论】：