web-dev-qa-db-fra.com

Ajouter une classe à l'élément select2

La documentation est soit terrible ou il me manque quelque chose. J'essaie d'ajouter une classe d'erreur à une zone select2 pour la validation du formulaire. C'est juste une bordure rouge 1px.

J'ai trouvé la méthode containerCssClass dans la documentation, mais je ne sais pas comment l'appliquer.

J'ai essayé ce qui suit sans succès:

$("#myBox").select2().containerCssClass('error');
jqueryjquery-select2
20
Deac Karns

jQuery utilise des objets JSON pour initialiser, donc je suppose que celui-ci le sera aussi: \

$("#myBox").select2({ containerCssClass : "error" });

Si vous souhaitez ajouter/supprimer une classe, vous pouvez le faire après l'avoir initialisée.

$($("#myBox").select2("container")).addClass("error");
$($("#myBox").select2("container")).removeClass("error");

La fonction ci-dessus obtient le noeud DOM du conteneur principal de select2, par exemple: $("#myBox").select2("container").

Important
Vous devrez utiliser la méthode container pour obtenir le conteneur car vous n'éditerez pas directement le SELECT, mais select2 générera un autre code HTML pour simuler un SELECT stylable.

26
Niels

Pour l'élément select2 déjà initialisé, j'ai essayé la solution @Niels, mais cela a entraîné une erreur: Uncaught TypeError: Cannot read property 'apply' of undefined 

Entré dans la source et cela a fonctionné à la place: 

$($('#myBox').data('select2').$container).addClass('error')
$($('#myBox').data('select2').$container).removeClass('error')

Utilisation de select2 v4.0.3 full

18
Jared

Selon la documentation , containerCssClass est uniquement une propriété du constructeur. Le mieux que vous puissiez faire est probablement de le réinitialiser lorsque vous obtenez une erreur via:

$("#myBox").select2({
    containerCssClass: "error" 
});

Note des commentaires: Si vous obtenez une erreur non capturée: pas de select2/compat/containerCss (…), vous devez inclure la version de select2.full.js à la place de la version de base.

10
Samsquanch

utiliser l'option de thème.

 $(".select").select2({
        placeholder: "",
        allowClear: false,
        theme: "custom-option-select"
    });
5
steve joe

Manière la plus simple:

Créer une classe parente comme 

<div class="select-error">
    <select id="select2" name="select2" data-required class="form-control">
        <option value="" selected>No selected</option>
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
</div>

lorsque vous validez avec jquery ou php, ajoutez simplement un style ou css à la classe .select-error 

style="border:1px solid red; border-radius: 4px"

exemple jQuery:

$('[data-required]').each(function() {
  if (!$(this).val()) {
    if ($(this).data('select2')) {
      $('.select-error').css({
        'border': '1px solid red',
        'border-radius': '4px'
      });
    }
  });
1
trisztan

Pour ceux qui errent ici à partir de Google, la propriété containerCssClass a un nom trompeur puisqu’elle n’ajoute aucune classe à l’élément conteneur, mais plutôt à l’élément selection. Vous pouvez le voir lorsque vous inspectez le code HTML généré.

Je suis tombé sur un joli petit hack ici qui vous permet d'appliquer votre classe css au conteneur en l'ajoutant à la propriété theme, comme ceci:

$('#my-select').select2({
    theme: "bootstrap myCssClass",
});
1
Shahin Dohan

Vous pouvez utiliser dropdownCssClass opiton

$("#myBox").select2({
    containerCssClass: "error" 
});
0
ycscholes