ti-enxame.com

Adicionar classe ao elemento select2

A documentação é terrível ou estou perdendo alguma coisa. Estou tentando adicionar uma classe de erro a uma caixa select2 para validação de formulário. É apenas uma borda vermelha de 1px.

Eu encontrei o método containerCssClass na documentação, mas não tenho certeza de como aplicá-lo.

Eu tentei o seguinte sem sorte:

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

jQuery usa objetos JSON para inicializar, então eu acho que este também irá:

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

Se você quiser adicionar/remover uma classe, você pode fazer isso depois que você inicializou

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

A função acima obtém o nó DOM do recipiente principal de select2, por exemplo: $("#myBox").select2("container")

Importante
Você precisará usar o método container para obter o container, já que você não editará o SELECT diretamente, mas select2 irá gerar outro HTML para simular um SELECT que seja estilizado.

26
Niels

Para o elemento select2 já inicializado, tentei a solução @Niels, mas isso resultou em um erro: Uncaught TypeError: Cannot read property 'apply' of undefined 

Entrou na fonte e isso tem funcionado em vez disso: 

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

Usando select2 v4.0.3 full

18
Jared

De acordo com o documentation , containerCssClass é apenas uma propriedade do construtor. O melhor que você provavelmente poderá fazer é reinicializá-lo quando receber um erro por meio de:

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

Nota dos comentários: Se você receber o erro Uncaught: No select2/compat/containerCss (…), você precisa incluir a versão select2.full.js ao invés da básica

10
Samsquanch

use a opção de tema.

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

Caminho mais fácil:

Crie uma classe pai como 

<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 você validar com jquery ou php basta adicionar o estilo ou css para .select-error class like 

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

exemplo de jQuery:

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

Para aqueles que estão vagando pelo google, a propriedade containerCssClass tem um nome incorreto, pois na verdade não adiciona nenhuma classe ao elemento container, mas sim ao elemento selection. Você pode ver isso quando inspecionar o html gerado.

Eu me deparei com um pequeno hack aqui que permite que você aplique sua classe css ao container adicionando-a à propriedade theme, assim:

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

Você pode usar a opção dropdownCssClass

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