在里面添加跨度<option>标记和样式

Question

我想在<option>标签内的文本之前添加 span 并为其设置样式（它应该代表选择菜单中的颜色）。 然而它似乎不起作用......

如何使这段代码工作？

JsFiddle： http : //jsfiddle.net/bartuz/08e0L9j2/2/

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

Answer 1

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

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

它不起作用，因为它不是选择框真正支持的功能（还！）

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

Answer 2

你不应该依赖你的 hack 在 Firefox 上工作的事实，并不意味着它也应该在 Chrome 上工作。

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

如果您正在寻找一种方式来设置本机选择元素的样式，也许这会有所帮助：
https://catalin.red/making-html-dropdowns-not-suck/

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});

})