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

Solución:

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

Desde allí, puede acceder al $container propiedad para identificar el contenedor en el DOM y agregar la clase a eso de esta manera:

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="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://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>

Puede utilizar las siguientes opciones para agregar una clase al envase (selección) o desplegable (opciones):

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});

Según la Guía de migración en el Anuncio 4.0:

Si usa el construcción completa de Select2 (select2.full.js) se utilizarán módulos de compatibilidad en algunos casos para garantizar que su código aún se comporte como esperaba.

De acuerdo con los Documentos de configuración, se pueden pasar las siguientes opciones:

Sin embargo, Select2 no es muy bueno para definir qué es un “contenedor” y dónde esperaría encontrarlo.

Aquí hay un desglose de algunas de las estructuras html de alto nivel y dónde aparecen las clases personalizadas:

Aquí hay una demostración en ejecución que genera las clases personalizadas en el contenedor y los contenedores desplegables y luego las usa para diseñar el color de cada sección (solo para demostrar que se están insertando)

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});

select {
  width: 200px;
}

.custom-container span {
  color: blue!important;
}
.custom-dropdown {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://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>

Encontré una forma de agregar una clase. tenía 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');
  }
});

---

---

Utiliza Nuestro Buscador