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

Документация ужасна или я чего-то не хватает. Я пытаюсь добавить класс ошибки в поле select2 для проверки формы. Это просто красная рамка 1px.

Я нашел метод containerCssClass в документации, но я не уверен, как его применять.

Я пробовал следующее без везения:

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

Ответ 1

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

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

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

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

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

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

Ответ 2

Для уже инициализированного элемента 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 full

Ответ 3

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

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

Примечание от комментариев. Если вы получаете сообщение об ошибке "Нет": нет select2/compat/containerCss (...), вам нужно включить версию select2.full.js вместо основной

Ответ 4

используйте параметр темы.

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

Ответ 5

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

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

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

Ответ 6

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

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