Set a different color for each tag

Question

I have a select2 where the users can select tags from a list or add new tags. WHen the user insert a new tag, I record it on a database. The user can, from other screen edit this tag and associate it to a color. So my "tag" objects are like this:

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

What I would like to do is to show the tags with its colors inside the select2. I tried to do

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

but this does not change the background color of the div that holds the tag itself.

I also know I can use formatSelectionCssClass to add a css class to each item but in this case since the colors are user created, I do not have css classes with them (although if its the only way possible, is what I will do, dinamically generate a css file).

(PS.: This looks like a solution but I was looking for something more elegant)

Answer 1

Ok, I found a way to do this:

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