Как добавить класс в элемент select2 в версии 4.0

Это очень похоже на этот вопрос о том, как добавить класс к элементу select2, однако в ответах есть целевые ранние версии фреймворка, претерпевшие некоторые нарушения изменения в версии 4.0

В соответствии с этой проблемой добавить дополнительный пользовательский класс для выбора2-контейнера, было несколько недокументированных свойств, которые вы могли бы передать конструктору select2, включая: containerCss, containerCssClass, dropdownCss и dropdownCssClass.

Однако в версии 4, когда я запускаю следующий код:

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

Я получаю следующую ошибку:

Неподготовленная ошибка: нет select2/compat/containerCss

Как передать класс Select2 в версии 4.0?

Вот пример в 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>

Ответ 1

Select2 будет хранить всю информацию, которую он использует в исходном элементе выбора. Вы можете получить доступ к следующей информации, вызвав .data('select2') в исходном элементе:

Оттуда вы можете получить доступ к свойству $container, чтобы идентифицировать контейнер в DOM и добавить класс к следующему:

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

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

Здесь демонстрационная версия в фрагментах стека

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>

Ответ 2

Согласно Руководству по миграции в объявлении 4.0:

Если вы используете полную сборку Select2 (select2.full.js), модули совместимости будут использоваться в некоторых случаях, чтобы гарантировать, что ваш код все еще ведет себя так, как вы ожидали.

В соответствии с Документами по конфигурации могут быть переданы следующие параметры:

Тем не менее, Select2 не подходит для определения, что такое "контейнер" и где вы ожидаете его найти.

Вот разбивка некоторых высокоуровневых html-структур и где отображаются пользовательские классы:

Здесь работает демонстрационная версия, которая выводит пользовательские классы в контейнер и упаковщики раскрывающихся списков, а затем использует их для стилизации цвета каждого раздела (просто чтобы доказать, что они вставляются)

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

select {
  width: 200px;
}

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

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

Ответ 3

Найден способ добавления класса. с той же проблемой не смог найти способ и сделал это сам, так вот он:

$('.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');
  }
});

Ответ 4

Мы используем оболочку React для Select2, поэтому ни один из текущих ответов не работал для нас. Тем не менее, мы смогли сделать CSS, который нацелился на контейнер, хотя мы не могли добавить к нему класс, добавив класс в базовый элемент, затем используя соседний Селектор CSS:

$('.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>

Ответ 5

Вот короткий ответ, если вы хотите добавить класс ко всем элементам.

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