在<option>标签内添加<span>并对其进行样式设置

Question

我想在<option>标签内的文本前添加，并对其进行样式设置（它应该代表选择菜单中的颜色）。但是似乎不起作用...如何使这段代码生效？

JsFiddle: http://jsfiddle.net/bartuz/08e0L9j2/2/ 上面的示例似乎只在Firefox中有效...其他浏览器呢？

- Filip Bartuzi

---

尽管这是不允许的，但我可以在我的Firefox 30.0中看到一些彩色框 - 那么具体是什么没有起作用？！ - chm-software.com

在Chrome中它不... - Filip Bartuzi

这个链接的小工具确实像你所描述的那样运作 -- 有一个彩色的框，然后是文本。但它不是有效的HTML，因此在不同的浏览器上可能不一致。 - blgt

http://jsfiddle.net/kheema/08e0L9j2/3/ 这是你想要的吗？ - Kheema Pandey

它在谷歌浏览器中不起作用 @KheemaPandey - Filip Bartuzi

Answer 1

这将取决于您的网络浏览器。在最新版本的Firefox中，它可以正常工作。但是，在最新版本的Internet Explorer中无法工作。

您的问题有点具有误导性 - 我猜这就是为什么它被投票否决的原因 - 您正在问为什么它不起作用，而不是如何使其起作用。

它不起作用是因为它实际上不是selectboxes的支持特性（尚未！）

我建议您研究使用JavaScript来实现相同的结果（特别是jQuery UI selectmenu），它应该支持此类型的“高级”选择框。

- Alastair Campbell

---

它在Firefox中根本不应该工作，因为option元素不允许包含HTML后代元素。 - James Donnelly

@JamesDonnelly 为什么不呢？规范指定了什么是有效的HTML，以及有效的HTML必须如何呈现。据我所知，处理无效的HTML是实现特定的。 - blgt

在这种情况下，Firefox 明显没有正确处理无效的 HTML。通过 W3 的验证器传递将会出现两个错误：Stray start tag span. 和 *Stray end tag span.*，证实此 HTML 是无效的。Firefox 应该完全删除 option 中的任何 HTML 元素，并仅显示纯文本。 - James Donnelly

@JamesDonnelly 这个页面(http://www.w3.org/TR/html4/appendix/notes.html#h-B.1)说它“*不定义*”应该发生什么。 - blgt

James Donnelly，blgt的观点是正确的，即Web浏览器不应删除无效的标记。实际上，许多网站的标记都是错误的，这样做会破坏许多网站。Web浏览器应尽最大努力使开发人员想要发生的事情确实发生。由Web浏览器决定如何实现这一点，这就是为什么不同浏览器之间执行方式存在如此大的差异的原因。 - Alastair Campbell

@AlastairCampbell 在这种情况下，“最佳尝试”应该是剥离HTML标记，并仅输出纯文本，因为除Firefox之外的所有其他浏览器目前都不支持。<option><span>Hello, world!</span></option>现实中只应呈现为<option>Hello, world!</option>。在我看来，这应该被列为Firefox错误跟踪器上的错误。 - James Donnelly

Answer 2

你不应该依赖于你的hack在Firefox上运行良好，就认为它也能在Chrome上运行。

无论如何，样式选择始终令人沮丧，并且没有简单的方法来自定义本机选择元素。

如果你正在寻找一种样式化本机选择元素的方法，也许这可以帮助你：
https://catalin.red/making-html-dropdowns-not-suck/

- Red

Answer 3

选项元素不允许有子元素。 我扩展了您的相同答案，但是将背景颜色应用于选项元素，如此jsfiddle链接所示： https://jsfiddle.net/go4zee/6L0jjjoa/

$('#tag_item_color option').each(function () {
    var color = $(this).text();
    console.log(color);
    $(this).closest("option").css({"background-color":color});

})

- Zee