Добавить класс в элемент select2

jQuery использует объекты JSON для инициализации, поэтому я думаю, что и этот:\

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

Если вы хотите добавить/удалить класс, вы можете сделать это после его инициализации.

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

Вышеупомянутая функция получает узел DOM основного контейнера select2, например: $("#myBox").select2("container")

Важно
Вам нужно будет использовать метод container для получения контейнера, поскольку вы не будете редактировать SELECT напрямую, а select2 сгенерирует другой HTML для имитации SELECT, который можно стилизовать.

Для уже инициализированного элемента select2 я пробовал решение @Niels, но это привело к ошибке: Uncaught TypeError: Cannot read property 'apply' of undefined

Вошел в источник, и это работало вместо этого:

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

Полное использование select2 v4.0.3

Согласно документации, containerCssClass является только свойством конструктора. Лучшее, что вы, вероятно, сможете сделать, это повторно инициализировать его, когда вы получите сообщение об ошибке:

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

Примечание из комментариев: если вы получаете Uncaught Error: No select2/compat/containerCss(…), вам необходимо включить select2.full.js версия вместо базовой

Для тех, кто блуждает здесь из Google, свойство containerCssClass имеет вводящее в заблуждение имя, поскольку оно фактически не добавляет никаких классов к элементу контейнера, а скорее к элементу выбора. Вы можете увидеть это, когда просматриваете сгенерированный html.

Я наткнулся на здесь небольшой лайфхак, который позволяет применить CSS класс в контейнер, добавив его в свойство theme, например так:

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

использовать вариант темы.

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

Самый простой способ:

Создайте родительский класс, например

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

когда вы проверяете его с помощью jquery или php, просто добавьте стиль или css в класс .select-error, например

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

Пример jQuery:

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

Вы можете использовать вариант dropdownCssClass

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

select2 будет создавать другой диапазон с классом select2-container прямо в конце тела каждый раз, когда вы нажимаете на тег span, и выпадающий список с параметрами становится видимым, поэтому вы можете использовать событие щелчка и запускать функцию, которая добавляет ваш пользовательский класс в раскрывающийся контейнер в конце тела, а также диапазон, когда раскрывающийся список не отображается. это полностью сработало для меня.

$($(id).data('select2').$container).addClass("your-custom-class")
$($(id).data('select2').$container).click(() => $.each($("span.select2-container"), (index, value) => {
    if (index === $("span.select2-container").length - 1) {
        $(value).addClass("your-custom-class")
    }
}))