Dodaj klasę do select2 element

Question

Dokumentacja jest albo straszna, albo czegoś brakuje. Próbuję dodać klasę błędów do pola select2 do sprawdzania poprawności formularza. To tylko czerwona krawędź 1px.

Znalazłem metodę containerCssClass w dokumentacji, ale nie jestem pewien, jak ją zastosować.

Próbowałem następujących bez powodzenia:

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

Answer 1

jQuery wykorzystuje obiekty JSON zainicjować, więc myślę, że ten będzie również: \

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

Jeśli chcesz dodać/usunąć klasę można to zrobić po jej

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

zainicjowany Powyższa funkcja dostaje węzeł DOM głównego con tainer z select2 np .: $("#myBox").select2("container")

Ważne
Trzeba będzie użyć metody pojemnika, aby uzyskać pojemnik, ponieważ nie będzie edytować bezpośrednio wybrać ale select2 generuje inny kod HTML do symulacji SELECT, która jest łatwym do układania.

Answer 2

Zgodnie z documentation, containerCssClass jest tylko właściwością konstruktora. Najlepszym jesteś prawdopodobnie będzie w stanie zrobić to ponownie zainicjować go, gdy pojawi się błąd poprzez:

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

nocie z uwag: Jeśli masz Uncaught Błąd: Nie select2/compat/containerCss (...) , trzeba podać wersję select2.full.js zamiast podstawowego jednej

Answer 3

można użyć dropdownCssClass opiton

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

Answer 4

Najłatwiej:

Utwórz klasę nadrzędną jak

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

podczas sprawdzania go z jquery lub php wystarczy dodać styl lub css do .Wybrać błędów klasa jak

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

jQuery przykład:

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

Answer 5

Dla już zainicjowanego elementu select2 wypróbowałem rozwiązanie @Niels, ale spowodowało to błąd: Uncaught TypeError: Cannot read property 'apply' of undefined

poszedł do źródła i to działa zamiast:

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

Korzystanie select2 v4.0.3

Answer 6

opcja wykorzystanie motywu pełny.

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