为每个标签设置不同的颜色

Question

我有一个 select2，用户可以在其中从列表中选择标签或添加新标签。当用户插入新标签时，我将其记录在数据库中。用户可以从其他屏幕编辑此标签并将其与颜色相关联。所以我的“标签”对象是这样的：

{id:1, text:"cool tag", color:"#336699"}

我想做的是在 select2 中显示带有颜色的标签。我试着做

formatSelection: function (tag) {
    return '<div style="background-color:'+tag.color+'">' + tag.text + '</div>';
},

但这不会改变包含标签本身的 div 的背景颜色。

我也知道我可以使用formatSelectionCssClass 为每个项目添加一个 css 类，但在这种情况下，由于颜色是用户创建的，我没有带有它们的 css 类（尽管如果它是唯一可能的方法，那就是我会做的，动态生成一个css文件）。

（PS.：This 看起来像是一个解决方案，但我正在寻找更优雅的东西）

Answer 1

好的，我找到了一种方法：

data = function(){
  return [{id:1, text:"tag 1", color:"#555555"}, {id:2, text:"tag 2", color:"#336699"}]
},

formatSelectionCssClass = function(tag, container) {
    $(container).parent().css({ "background-color": tag.color });
};