Question

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

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

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

1 个答案: