web-dev-qa-db-fra.com

Comment ajouter une classe à un élément select2 en v4.0

Ceci est très similaire à cette question sur la façon de ajouter une classe à l’élément select2 , mais les réponses semblent cibler les versions antérieures du framework qui a subi quelques changements radicaux dans la v4.0.

Selon ce problème pour ajouter une classe personnalisée supplémentaire à select2-container , vous pouvez transmettre plusieurs propriétés non documentées au constructeur select2, notamment: containerCss, containerCssClass, dropdownCss et dropdownCssClass.

Cependant, dans la version 4, lorsque je lance le code suivant:

$('.select2').select2({
    containerCss: "wrap"
});

Je reçois l'erreur suivante:

Erreur non capturée: non select2/compat/containerCss

Comment puis-je passer une classe à Select2 en v4.0?

Voici un exemple dans StackSnippets:

$('.select2').select2({
    containerCss: "wrap"
});
<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 narrow wrap">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

javascriptjqueryjquery-select2
21
KyleMit

Select2 stockera toutes les informations qu'il utilise sur l'élément sélectionné d'origine. Vous pouvez accéder aux informations suivantes en appelant .data('select2') sur l'élément d'origine:

 Select2 Data

De là, vous pouvez accéder à la propriété $container pour identifier le conteneur dans le DOM et ajouter la classe à celle-ci comme ceci:

var $select2 = $('select.select2').select2()

$select2.data('select2').$container.addClass("wrap")

Voici une démo dans Stack Snippets

var $select2 = $('select.select2').select2()
$select2.data('select2').$container.addClass("wrap")
body .select2.narrow {
    width: 200px;
}
body .wrap .select2-selection--single {
    height: 100%;
}
body .select2-container.wrap .select2-selection--single .select2-selection__rendered {
    Word-wrap: break-Word;
    text-overflow: inherit;
    white-space: normal;
}
<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.full.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Really long name that normally</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

25
Nulle

Selon le Guide de migration de l’annonce 4.0 :

Les migrateurs doivent être conscients de quelques changements importants lorsqu'ils proviennent de versions plus anciennes de Select2.

Si vous utilisez le full build de Select2 (select2.full.js), vous serez automatiquement averti des modifications majeures majeures et des modules de compatibilité seront utilisés dans certains cas pour vous assurer que votre code se comporte toujours de la même manière. attendant.

Donc, le changement de bibliothèque suivant devrait fonctionner:

$('.select2').select2({
    containerCssClass: "wrap"
});
<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.full.js"></script>

<select class="select2">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

Cependant, il serait toujours bon de savoir s’il existe un moyen "correct" de gérer cela sans utiliser full.js

9
KyleMit

Trouver un moyen d’ajouter une classe ..___ avait le même problème, je ne pouvais pas trouver un moyen et je l’ai fait moi même, alors le voici: 

$('.select2').on('click',function(){
  var matchBlock = $(this).prev();
  if(matchBlock.hasClass('select-control-left')){
    $('.select2-dropdown').addClass('blue-select');
  }
  else{
     $('.select2-dropdown').addClass('orange-select');
  }
});
2
Anton Pogonii

Voici la réponse courte si vous souhaitez ajouter une classe à tous les éléments.

$.fn.select2.defaults.set('containerCssClass', 'wrap');
0
slob