将 <span /> 标签放在 <option /> 标签中是否不好，仅用于字符串操作而不是样式？

Question

我想对 <option /> 标签的文本内容进行分组。假设我有以下内容： <option>8:00 (1 hour)</option> ，时间模式 8:00 可以修改，然后括号中的文本 (1 hour) 也可以修改。

我正在考虑做类似的事情

<option>
  <span>8:00</span>
  <span> (1 hour)</span>
</option>

将 <span /> 标签放在 <option /> --- 标签中是否不好，仅用于字符串操作而不是样式？

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

Answer 1

来自 HTML 5spec ：

内容模型：

• 如果元素具有标签属性和值属性：无。
• 如果元素有标签属性但没有值属性：文本。
• 如果元素没有 label 属性并且不是 datalist 元素的子元素：不是元素间空白的文本。
• 如果该元素没有标签属性并且是数据列表元素的子元素：文本。

因此，根据上下文，您可以在 <option> 中放入两样东西 — 文本或什么都不放 — 您不能在其中放入 <span> 或任何其他元素。

---

来自 HTML 4.01 规范：

 <!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->

（甚至 HTML 3.2 和 HTML 2 规范也说： <!ELEMENT OPTION - O (#PCDATA)*> ）

---

选项元素不能有任何子元素。所以是的，这很糟糕。

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

Answer 2

您可以使用 Javascript 插件来克服此限制。例如 jQuery 插件“Select2” Select2 插件主页。我在我的几个项目中使用它，并认为它非常灵活和方便。

它们有很多，但它们做的事情完全相同——将传统的 <select> 转换为 <div> 具有额外功能的块。

原文由 Ivan Yaremchuk 发布，翻译遵循 CC BY-SA 3.0 许可协议