javascript - disable - select2 selected

Cómo agregar clase al elemento select2 en v4.0

Question

Esto es muy similar a esta pregunta sobre cómo agregar clase al elemento select2 , sin embargo las respuestas parecen dirigirse a versiones anteriores del marco que ha sufrido algunos cambios importantes en v4.0

De acuerdo con este problema para agregar una clase personalizada adicional a select2-container , había varias propiedades no documentadas que podría pasar al constructor select2, incluyendo: containerCss , containerCssClass , dropdownCss y dropdownCssClass .

Sin embargo en la versión 4 cuando ejecuto el siguiente código:

$(''.select2'').select2({
    containerCss: "wrap"
});

Obtuve el siguiente error:

Error no detectado: No select2 / compat / containerCss

¿Cómo puedo pasar una clase a Select2 en v4.0?

Aquí hay un ejemplo en StackSnippets :

$(''.select2'').select2({
    containerCss: "wrap"
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

Answer 1

Aquí está la respuesta corta si desea agregar clase a todos los elementos.

$.fn.select2.defaults.set(''containerCssClass'', ''wrap'');

Answer 2

De acuerdo con la Guía de Migración en el Anuncio 4.0 :

Hay algunos cambios importantes que los migradores deben tener en cuenta cuando provienen de versiones anteriores de Select2.

Si usa la compilación completa de Select2 (select2.full.js), se le notificará automáticamente de los cambios más importantes y, en algunos casos, se utilizarán módulos de compatibilidad para garantizar que su código aún se comporta como esperaba.

Así que el siguiente cambio de biblioteca debería funcionar:

$(''.select2'').select2({
    containerCssClass: "wrap"
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select class="select2">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

Sin embargo, aún sería bueno saber si hay una forma "correcta" de manejar esto sin usar full.js

Answer 3

Encontré una manera de agregar una clase. Tuve el mismo problema, no pude encontrar una manera y lo hice yo mismo, así que aquí está:

$(''.select2'').on(''click'',function(){
  var matchBlock = $(this).prev();
  if(matchBlock.hasClass(''select-control-left'')){
    $(''.select2-dropdown'').addClass(''blue-select'');
  }
  else{
     $(''.select2-dropdown'').addClass(''orange-select'');
  }
});

Answer 4

Estamos utilizando un contenedor React para Select2, por lo que ninguna de las respuestas actuales funcionó para nosotros. Sin embargo, pudimos crear CSS que apuntaba al contenedor a pesar de que no pudimos agregarle una clase agregando la clase al elemento base y luego usando un selector CSS adyacente :

$(''.select2'').select2();

.wrap + .select2-container .select2-selection--single {
    border: solid 1px #F00;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

Answer 5

Select2 almacenará toda la información que utiliza en el elemento de selección original. Puede acceder a la siguiente información llamando a .data(''select2'') en el elemento original:

Desde allí, puede acceder a la propiedad $container para identificar el contenedor en el DOM y agregar la clase a la siguiente:

var $select2 = $(''select.select2'').select2()

$select2.data(''select2'').$container.addClass("wrap")

Aquí hay una demostración en Stack Snippets

var $select2 = $(''select.select2'').select2()
$select2.data(''select2'').$container.addClass("wrap")

body .select2.narrow {
    width: 200px;
}
body .wrap .select2-selection--single {
    height: 100%;
}
body .select2-container.wrap .select2-selection--single .select2-selection__rendered {
    word-wrap: break-word;
    text-overflow: inherit;
    white-space: normal;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Really long name that normally</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>