Klasse zu select2 Element hinzufügen

Question

Die Dokumentation ist entweder schrecklich oder mir fehlt etwas. Ich versuche, eine select2-Box eine Fehlerklasse für die Formularüberprüfung hinzuzufügen. Es ist nur ein 1px roter Rand.

Ich fand die containerCssClass Methode in der Dokumentation, aber ich bin mir nicht sicher, wie man es anwendet.

Ich habe versucht, die folgenden ohne Glück:

$("#myBox").select2().containerCssClass('error'); 

Answer 1

jQuery verwendet Objekte JSON zu initialisieren, so dass ich denke, das wird man auch: \

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

Wenn Sie hinzufügen möchten/entfernen Sie eine Klasse, die Sie tun können, nachdem Sie es initialisiert haben

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

Die obige Funktion ruft den DOM-Knoten des Hauptcontrollers ab Tainer von select2 z.B .: $("#myBox").select2("container")

Wichtige
Sie müssen die Container-Methode verwenden, um den Behälter zu erhalten, da Sie nicht direkt bearbeiten die SELECT aber select2 werden andere HTML erzeugen eine SELECT zu simulieren, die frisierbar ist.

Answer 2

Nach der documentation ist containerCssClass nur eine Konstruktoreigenschaft. Das Beste, was Sie sind wahrscheinlich, es zu tun in der Lage sein wird neu initialisiert, wenn Sie einen Fehler über erhalten:

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

Hinweis von Kommentaren: Wenn Sie nicht erfasste Fehler erhalten: Nein select2/compat/containerCss (...) , müssen Sie die select2.full.js Version anstelle der Grund ein

Answer 3

Sie können dropdownCssClass opiton

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

Answer 4

der einfachste Weg umfassen:

Erstellen einer übergeordneten Klasse wie

<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> 

, wenn Sie es mit jquery oder PHP zu validieren nur Stil oder CSS in den .select-Fehlerklasse wie

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

jQuery Beispiel:

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

Answer 5

Für bereits initialisiertes select2-Element habe ich @Niels Lösung ausprobiert, aber es führte zu einem Fehler: Uncaught TypeError: Cannot read property 'apply' of undefined

ging in die Quelle und diese stattdessen gearbeitet hat:

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

Mit select2 V4.0.3 voll

Answer 6

Verwendung Thema Option.

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