Как выделить в select2 определенные option?

Question

[Роман Матвеев]

Доброго времени суток!
Использую для select - плагин SELECT2.
В select есть такая группировка по категориям (см. ниже), но выбрать можно только option, но стоит задача чтоб выбрать нужно не только подкатегории в частности города а категории тоже, а в данном случае это сделать нельзя, когда не разбиваю по группам убирая optgroup то все вывожу одним списком option.

Так вот в чем суть вопроса, как в SELECT2 выделить определенные option а в частности категории, повесть на них класс или просто обернуть в тег , так чтоб можно было их выделить, так как select2 переобразует все в вой список используя ul>li

<select>
  <optgroup label="Группа 1">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Группа 2">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  </select>

у select2 есть такая возможность сделать шаблон для списка, но не могу сделать чтоб как-то выделить нужные мне option

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var baseUrl = "/user/pages/images/flags";
  var $state = $(
    '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};

$(".js-example-templating").select2({
  templateResult: formatState
});

Comments

[Александр Шипин]

Добавить multiple не пробовали?

<select class="js-example-templating" multiple="multiple">
  <optgroup label="Группа 1">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Группа 2">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

function formatState (state) {
    if (!state.id) {
        return state.text;
    }
    var baseUrl = "/user/pages/images/flags";
    var $state = $(
        `<span>
            <img src="${baseUrl}/${state.element.value.toLowerCase()}.png" class="img-flag" />
            ${state.text}
        </span>`);
    return $state;
}

$(document).ready(function() {
  $(".js-example-templating").select2({
    templateResult: formatState
  });
});

[Роман Матвеев]

Александр Шипин, это не помогло, так как multiple выводит теги
а нужно именно вывести весь список select и к определенному option поставить класс или обертку, т.е. как-то сделать выборку