Выбираемые optgroups в Select2

Я хочу создать многоуровневые опции select2 с отступом, но я не хочу использовать элементы optgroup для этого, потому что я хочу разрешить выбирать также основные категории. Есть ли способ стиля, если для select2?

Мой необработанный HTML-выбор выглядит следующим образом:

<select class="js-select-multiple">
  <option class="l1">Option 1</option>
  <option class="l2">Suboption 1</option>
  <option class="l2">Suboption 2</option>
  <option class="l2">Suboption 3</option>
  <option class="l1">Option 2</option>
  ...
</select>
<script>$(".js-select-multiple").select2({maximumSelectionLength: 5});</script>

Поэтому без использования Select2 я могу добавить свойство text-indent в класс .l2. Однако кажется, что Select2 не использует те классы, которые используются для опции, поэтому стилизация этих классов не будет работать.

Есть ли какое-либо обходное решение для этого?

Ответы

Ответ 1

Вы правильно поняли, что Select2 не переносит классы CSS из тегов <option> в список результатов. В основном это связано с тем, что явно не привязывает список результатов к существующим тегам <option>, а также имеет набор разумных значений по умолчанию. Легче добавить возможность переноса классов позже, чем удалить их.

Вы можете сделать это, переопределив templateResult и получив исходную опцию из data.element (где data - это первый параметр).

$('.select2').select2({
  templateResult: function (data) {    
    // We only really care if there is an element to pull classes from
    if (!data.element) {
      return data.text;
    }

    var $element = $(data.element);

    var $wrapper = $('<span></span>');
    $wrapper.addClass($element[0].className);

    $wrapper.text(data.text);

    return $wrapper;
  }
});
.l2 {
  padding-left: 1em;
}
<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" style="width: 200px">
  <option class="l1">Option 1</option>
  <option class="l2">Suboption 1</option>
  <option class="l2">Suboption 2</option>
  <option class="l2">Suboption 3</option>
  <option class="l1">Option 2</option>
</select>