Aggiungi classe all'elemento select2

Question

La documentazione è terribile o mi manca qualcosa. Sto cercando di aggiungere una classe di errore a una casella di selezione2 per la convalida del modulo. È solo un bordo rosso 1px.

Ho trovato il metodo containerCssClass nella documentazione, ma non sono sicuro di come applicarlo.

Ho provato quanto segue senza fortuna:

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

Answer 1

jQuery utilizza oggetti JSON per inizializzare, quindi credo che questo sarà così: \

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

Se si desidera aggiungere/rimuovere una classe è possibile farlo dopo averlo inizializzato

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

La funzione sopra riportata ottiene il nodo DOM del cono principale TAINER di select2 es .: $("#myBox").select2("container")

Importante
Sarà necessario utilizzare il metodo del contenitore per ottenere il contenitore dal momento che non modificare il SELEZIONA direttamente, ma select2 genererà altra HTML per simulare un SELECT che è stylable.

Answer 2

In base allo documentation, containerCssClass è solo una proprietà del costruttore. La migliore probabilmente stai andando ad essere in grado di fare è reinizializzare quando si ottiene un errore tramite:

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

nota dai commenti: Se si ottiene errore non rilevato: No select2/compat/containerCss (...) , è necessario includere la versione select2.full.js invece della base uno

Answer 3

È possibile utilizzare dropdownCssClass opiton

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

Answer 4

modo più semplice:

Creare una classe genitore come

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

quando si convalida con jQuery o PHP basta aggiungere stile o CSS per .SELECT errori di classe come

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

jQuery esempio:

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

Answer 5

Per elemento select2 già inizializzato ho provato la soluzione @Niels ma ha provocato un errore: Uncaught TypeError: Cannot read property 'apply' of undefined

entrò nella sorgente e questo ha lavorato invece:

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

Utilizzando select2 v4.0.3 pieno

Answer 6

opzione Utilizza tema.

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