Select2 dropdown is not adding classes to its dropdown items from original options

Question

Select2 is not adding the classes to its dropdown items from the options

Suppose in the below dropdown code, attribute class="highlight" was added to few options to highlight those with some background color. But select2 is not adding this class="highlight" to list items in dropdown

See the difference in below images.

Normal dropdown (cities1)

Select2 dropdown (cities2)

is it possible to get the same class names from options to select2 dropdown items?

Please help

$('#cities2').select2();

.highlight {
   background-color: #FFCCCB;
}

user_4596313 · Answer

I am not quite sure what you want to achieve but if you want to directly change the classes that select2 generates you would have to do a small hack to the classes that the select2 generates whenever the onchange event is triggered on the select element.

In other words, what I actually did was to target those two css classes that the select2 generates whenever you hover or click on a certain option value. I applied a !important for the css style.

EDIT:

What I did in order to select and apply this certain css class to those specific options, I took the templateResult option from the documentation and added it whenevewr I trigger the select2 plugin. The data.element property has everything you need. .attr("class") => gives you the .highlight class.

$(container).addClass($(data.element).attr("class"));

 
     $("#cities1").select2({
          templateResult: function(data, container) {
            if (data.element) {
              console.log(data);
              console.log(container);

              $(container).addClass($(data.element).attr("class"));
            }
            return data.text;
          }
       });

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

    .highlight {
       background-color: #FFCCCB;
    }

Select2 dropdown is not adding classes to its dropdown items from original options

1 Answers