Javascript 在内添加span标记并设置其样式

我想在标签内的文本之前添加span，并在选择菜单中设置它应该代表的颜色。然而，它似乎不起作用

如何使这段代码工作

JsFiddle：

---

上面的例子似乎只适用于Firefox。。。其他浏览器呢

这将取决于您的web浏览器。在最新版本的Firefox中，它运行良好。但是，它在最新版本的Internet Explorer中不起作用

你的问题有点重——我怀疑这就是它被否决的原因——你问的是为什么它不起作用，而不是如何让它起作用

它不起作用，因为它还不是SelectBox真正支持的功能

---

我建议您考虑使用JavaScript来实现相同的结果，特别是，它应该支持这种类型的“高级”选择框

你不应该相信你的黑客可以在Firefox上工作，但这并不意味着它也应该在Chrome上工作

无论如何，样式选择总是令人沮丧，并且没有简单的方法来定制原生选择元素

如果您正在寻找一种方法来设置本机select元素的样式，这可能会有所帮助：

---

选项元素不允许有子元素。 我扩展了您的相同答案，但将背景色应用于option元素，如下面的JSFIDLE链接所示：

---

尽管这是不允许的，但在我的Firefox 30.0中我可以看到一些彩色框——那么到底是什么不起作用呢？！在chrome中，没有…小提琴链接的工作原理与您所描述的完全相同-有一个彩色框，然后是文本。但它不是有效的HTML，因此在不同浏览器之间可能不一致。这是您想要的吗？它在chrome@KheemaPandeyIt中不起作用。它不应该在Firefox中起作用，因为option元素不允许包含HTML子体。@JamesDonnelly为什么不？该规范指定什么是有效的HTML，以及有效的HTML必须如何呈现。处理无效的html，afaik，是实现-specific@blgt在这种情况下，Firefox显然没有正确处理无效的HTML。通过W3的验证器传递该信息将产生两个错误：错误的开始标记span。和结束标记span.，确认此HTML无效。Firefox应该完全删除选项中的任何HTML元素，并且只显示纯文本。@JamesDonnelly说它没有定义应该发生的事情James Donnelly，blgt是正确的，因为web浏览器不应该删除无效的标记。事实上，很多网站的标记都不正确，这样做会破坏很多网站。web浏览器应该尽最大努力使开发人员想要的事情真正发生。这完全取决于网络浏览器，由它来决定它是如何做到这一点的，这就是为什么不同的浏览器在做事情的方式上有如此大的差异。

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

})