Select2 – это популярная библиотека на основе jQuery, которая расширяет возможности HTML-элементов выбора, предоставляя расширенные функции, такие как поиск, тегирование и удаленная загрузка данных. Хотя Select2 предоставляет отличные возможности настройки, он не поддерживает отображение изображений в раскрывающихся списках. В этой статье мы рассмотрим несколько способов добавления изображений в раскрывающиеся списки Select2, используя разные подходы и примеры кода.

Метод 1: использование параметров templateResultи templateSelection

$(document).ready(function() {
  $('.select2-dropdown').select2({
    templateResult: formatOption,
    templateSelection: formatOption
  });
});
function formatOption(option) {
  if (!option.id) {
    return option.text;
  }
  var $option = $('<span><img src="' + option.element.dataset.image + '" class="select2-img" /> ' + option.text + '</span>');
  return $option;
}

Метод 2: использование пользовательского CSS и атрибутов данных

$(document).ready(function() {
  $('.select2-dropdown').select2({
    templateResult: formatOption,
    templateSelection: formatOption
  });
});
function formatOption(option) {
  if (!option.id) {
    return option.text;
  }
  var $option = $('<span><span class="select2-img" ></span> ' + option.text + '</span>');
  return $option;
}

Метод 3: использование параметра dropdownCssClassс пользовательским CSS

$(document).ready(function() {
  $('.select2-dropdown').select2({
    dropdownCssClass: 'select2-dropdown-with-images'
  });
});

CSS:

.select2-dropdown-with-images .select2-results__option {
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
}
.select2-dropdown-with-images .select2-results__option .select2-img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
}

В этой статье мы рассмотрели различные способы добавления изображений в раскрывающиеся списки Select2. Мы узнали, как использовать параметры templateResultи templateSelection, пользовательский CSS и атрибуты данных, а также параметр dropdownCssClassс пользовательским CSS. Эти методы обеспечивают гибкость и позволяют повысить визуальную привлекательность и удобство использования раскрывающихся списков Select2 за счет включения изображений в параметры. Поэкспериментируйте с этими методами, чтобы создать привлекательные и удобные раскрывающиеся списки с помощью Select2.