Ajout d'un style de balises personnalisé dans la liste déroulante multi-sélection Select2

Question

J'utilise donc la bibliothèque Select2 4 ( https://select2.github.io/ ) et j'ai un problème.

<select id="test" multiple style="width:800px;">
    <option value="a">aaaaa</option>
    <option value="b">bbbbb</option>
    <option value="c">cccc</option>
    <option value="d">ddddd</option>
</select>

(...)

$("#test").select2({
   tags: true,
   tokenSeparators: [',', ' ']
})

Cela permet de générer, après avoir fait quelques choix, un élément DOM qui contient quelques <li> s

Donc - cela fonctionne bien. Mais j'ai besoin d'ajouter mes classes à ces <li> éléments après le changement. Je ne sais pas comment faire car Select2 réécrit mes classes instantanément après l'ajout.

J'ai essayé quelque chose comme ça :

selectEl.change(function() {
  var elements = $('.select2-selection > ul > li');
  elements.each(function() {
    $(this).addClass('my-test-class');
  });
});

mais rien ne change (sauf le dernier élément, qui est une entrée). Je veux dire - je pense que cela fonctionne, mais Select2 le réécrit instantanément.

J'ai essayé de le faire en utilisant change, select2:select listeners et aucune de ces méthodes ne fonctionne bien.

L'idée est la suivante : ajouter "select2-auto" à l'adresse de l'utilisateur. <li> qui sont choisis dans la liste déroulante, et la classe "select-manual" aux autres.

Answer 1

Vous pouvez utiliser templateSelection: pour les styles de balises personnalisés, veuillez trouver le snippet ci-dessous pour votre référence

templateSelection: function(selection) {
        if(selection.selected) {
            return $.parseHTML('<span class="customclass">' + selection.text + '</span>');
        }
        else {
            return $.parseHTML('<span class="customclass">' + selection.text + '</span>');
        }
    }

$("#test").select2({
   tags: true,
   allowClear: true, //
   closeOnSelect: false,
   tokenSeparators: [',', ' '],
   templateSelection: function(selection) {
        if(selection.selected) {
            return $.parseHTML('<span class="customclass">' + selection.text + '</span>');
        }
        else {
            return $.parseHTML('<span class="customclass">' + selection.text + '</span>');
        }
    }

});

$("#test").on("select2:select", function(e) { 
$("li[aria-selected='true']").addClass("customclass");
$("li[aria-selected='false']").removeClass("customclass");
$('.select2-search-choice:not(.my-custom-css)', this).addClass('my-custom-css');
});

$("#test").on("select2:unselect", function(e) { 
$("li[aria-selected='false']").removeClass("customclass");
});

.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}

.customclass
{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select id="test" multiple style="width:800px;">
    <option value="a">aaaaa</option>
    <option value="b">bbbbb</option>
    <option value="c">cccc</option>
    <option value="d">ddddd</option>
</select>

Answer 2

dropdownCssClass Utilisation de la propriété pour ajouter une classe au menu déroulant select2. Quelque chose comme ceci,

$("#test").select2({
     tags: true,
     tokenSeparators: [',', ' '],
     containerCssClass: "my-test-class",
     dropdownCssClass: "test-class"
 });

J'espère que cela vous conviendra. Merci.

Answer 3

$("#test").select2({
   tags: true,
   allowClear: true, //
   closeOnSelect: false,
   tokenSeparators: [',', ' ']
});

$("#test").on({
  "select2:select": function(e) { 
      $("li[aria-selected='true']").addClass("customclass");
      $("li[aria-selected='false']").removeClass("customclass");
    },
    "select2:opening": function(e) { 
        setTimeout(function(){
          $("li[aria-selected='true']").addClass("customclass");
          $("li[aria-selected='false']").removeClass("customclass");
        },0)
    },
    "select2:unselect" : function(e) { 
        $("li[aria-selected='false']").removeClass("customclass");
    }
});

.selectRow {
      display : block;
      padding : 20px;
  }
  .select2-container {
      width: 200px;
  }

  .customclass
  {
    color:red;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select id="test" multiple style="width:800px;">
    <option value="a">aaaaa</option>
    <option value="b">bbbbb</option>
    <option value="c">cccc</option>
    <option value="d">ddddd</option>
</select>