web-dev-qa-db-fra.com

Optgroups sélectionnables dans Select2

Je veux créer des options select2 à plusieurs niveaux avec indentation mais je ne veux pas utiliser les éléments optgroup pour cela parce que je veux permettre de sélectionner également les catégories principales. Existe-t-il un moyen de styliser si pour select2?

Ma sélection HTML brute ressemble à ceci:

<select class="js-select-multiple">
  <option class="l1">Option 1</option>
  <option class="l2">Suboption 1</option>
  <option class="l2">Suboption 2</option>
  <option class="l2">Suboption 3</option>
  <option class="l1">Option 2</option>
  ...
</select>
<script>$(".js-select-multiple").select2({maximumSelectionLength: 5});</script>

Donc, sans utiliser Select2, je peux ajouter text-indent propriété à .l2 classe. Cependant, il semble que Select2 n'utilise pas les classes utilisées pour l'option, donc le style de ces classes ne fonctionnera pas.

Y a-t-il une solution pour cela?

jquerycssjquery-select2
16
Marcin Nabiałek

Vous avez raison de reconnaître que Select2 ne transporte pas les classes CSS des balises <option> Vers la liste de résultats. Cela a principalement à voir avec le fait de ne pas lier explicitement la liste des résultats aux balises <option> Existantes, et d'avoir également un ensemble de valeurs par défaut sensibles. Il est plus facile d'ajouter la possibilité de transférer des classes par la suite que de les supprimer.

Vous pouvez le faire en remplaçant templateResult et en obtenant l'option d'origine de data.element (Où data est le premier paramètre).

$('.select2').select2({
  templateResult: function (data) {    
    // We only really care if there is an element to pull classes from
    if (!data.element) {
      return data.text;
    }

    var $element = $(data.element);

    var $wrapper = $('<span></span>');
    $wrapper.addClass($element[0].className);

    $wrapper.text(data.text);

    return $wrapper;
  }
});
.l2 {
  padding-left: 1em;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="select2" style="width: 200px">
  <option class="l1">Option 1</option>
  <option class="l2">Suboption 1</option>
  <option class="l2">Suboption 2</option>
  <option class="l2">Suboption 3</option>
  <option class="l1">Option 2</option>
</select>

Notez que j'utilise également padding-left Au lieu de text-indent, Qui est généralement utilisé par Select2 pour les options imbriquées.

27
Kevin Brown