Как передать атрибуты <option> для select2?

Я использую Select2 4.0. У меня есть список параметров, некоторые из которых "удалены", и я хочу указать, какие из них. Мой элемент select выглядит следующим образом:

<style>.deleted { color: red; }</style>

<select name="itemid" id="item-list" tabindex="1">
    <option></option>
    <option value="1">Item 1</option>
    <option value="2" class="deleted">Item 2</option>
    <option value="3">Item 3</option>
</select>

И он инициализируется следующим образом:

<script src="/static/js/select2.min.js"></script>
<script>
$(function() {
    $("#item-list").select2({
        placeholder: 'Select item'
    });
});
</script>

Однако, в результирующем HTML-коде, который генерирует select2, я не вижу способа ссылаться на этот класс. Также попробовал атрибут data-deleted в опции, без везения.

Единственное, что мне кажется близким, это templateResult, где я могу проверить opt.element.className. Но я не вижу, как получить доступ к опции select2 оттуда. В любом случае этот обратный вызов работает на каждом отдельном поиске, который совсем не то, что я хочу.

Есть ли другой способ создания конкретных опций в Select2?

UPDATE: как отмечено в комментариях, существует функция find(), но она получает только исходные элементы <option>, а не те элементы <li>, которые select2 генерируют. Вот что я пробовал:

var sel2 = $("#item-list").select2({
    placeholder: 'Select item'
});

sel2.find('.deleted').each(function() {
    $(this).css('color', 'red');
});

Ответы

Ответ 1

Начиная с Select2 4.0.1 (только что выпущенный), вы можете переносить классы с опцией templateResult. Первым параметром является отображаемый объект данных, а второй аргумент - это контейнер, в который он будет отображаться.

$("select").select2({
  templateResult: function (data, container) {
    if (data.element) {
      $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
  }
});

.yellow { background-color: yellow; }
.blue { background-color: blue }
.green { background-color: green; }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/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.1/js/select2.js"></script>

<select class="select2">
  <option value="AL" class="yellow">Alabama</option>
  <option value="AK" class="blue">Alaska</option>
  <option value="AZ" class="green">Arizona</option>
</select>

Ответ 2

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

function select2CopyClasses(data, container) {
    if (data.element) {
        $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
}

$("select").select2({
    templateResult: select2CopyClasses,
    templateSelection: select2CopyClasses
});

Ответ 3

Если вы хотите сделать это по умолчанию, каждый новый select2 копирует определение класса из option в select2-element. Включите код после загрузки select2.js

$.fn.select2.defaults.set("templateResult", function(item, li) {
  if (item && item.element && item.element.className.length) {
    $(li).addClass(item.element.className);
  }
  return item.text;
}

Ответ 4

Я пытаюсь сделать изюминку слов, которые я нашел. Я создал новый простой ввод с class= "sel 5". Теперь все работает отлично. Вы можете увидеть: Пример enter code here

Но я не могу сделать это для class= "select 2-search__field" (это заполнитель). Как мне попасть в поле ввода? Спасибо