Modification de la couleur d'arrière-plan d'une sélection select2 dans le champ de sélection

Question

J'utilise Select2 pour configurer des champs de type de balise à sélection multiple dans mon application. Je sais quel attribut CSS change les couleurs de la boîte de sélection une fois qu'il est placé dans le champ de sélection:

boîte de sélection couleur

.select2-container--default .select2-selection--multiple .select2-selection__choice { 
    background-color: #e4e4e4; 
    border: 1px solid #aaa; 
    border-radius: 4px; 
    cursor: default; 
    float: left; 
    margin-right: 5px; 
    margin-top: 5px; 
    padding: 0 5px 
} 

Ce que je suis en train de comprendre comment avoir ce changement en fonction de la sélection effectuée par un utilisateur. La liste de sélection est prédéfinie.

ai essayé quelque chose comme ceci:

JavaScript pour initialiser/changement de boîte de couleur

$(document).ready(function() { 
     $('#test').select2(); 
     $('.select2-container--default .select2-selection--multiple .select2-selection__choice').each(function() { 
      var title = $(this).attr('title'); 
      console.log(title); 
      if (title === 'Breakfast') { 
       $(this).parent().css({ 'background-color': "green" }); 
      } 
      if (title === 'Brunch') { 
       $(this).parent().css({ 'background-color': "red" }); 
      } 
      if (title === 'Lunch') { 
       $(this).parent().css({ 'background-color': "blue" }); 
      } 
     }); 
    }); 

Cela ne semble pas fonctionner. Est-ce que quelqu'un a essayé de styliser les boîtes de tag pour Select2?

Answer 1

changement $(this).parent().css('background-color', 'green');

par $(this).parent().css({ 'background-color': "green" });

Et même avec le reste.