Pass class from <option> to converted <li>

How Do I...
#1

Is there a way to cleanly pass a class (or style/data-elements etc) from the original <option> that gets converted to the <li class="select2-results__option">...</li>?

#2

I think I need to use templateResult to do that, accessing the class from the state var.

#3

When you initialize a Select2 widget from an HTML <select>, the Select2 code does not take any notice of class, data-*, or style attributes on the individual <option> elements. If you need to include extra data (beyond the value and innerText properties of your <option> elements) in your Select2 items, then I would suggest that you use a JavaScript array to provide data to your Select2 instead of initializing it from HTML.

#4

your link is broaken

#5

Did you found solution?

#6

I’ve done this:

function select2Result (option) {
  if (!option.element) {
    return option.text;
  } else {
    var $option = $('<div class="' + option.element.className + '">' + option.text + '</div>');
  }

  return $option;
}

...

$('.mine-select2').select2({
  templateResult: select2Result,
  templateSelection: select2Selection,
  allowClear: false,
});