Select2 Option Class is not Displaying Correctly

[Steve Dyke]

I am building a select list in an AJAX callback.
Once the list is returned I apply select2.
There is a class set to the option that sets the background color based on a filed value when the select string is build on the server.
Before the select2 is applied the lists shows the options that should be yellow as expected.
However, once the select2 is applied the background color never changes even though when I inspect the html the class is set to yellowBG.

This is part of my AJAX callback:

else if(serialNumberListStatus){
						
	$('.serialNumberList').html(serialNumberSelectList);
                   					
	$('.generalLabel-input-pv-select').select2({dropdownCssClass: 'ui-widget ui-jqdialog zclass',width: 300});
}

The first is the html select list. the second is the html with select2 applied.
The html select displays the second option with yellow background as expected.
The select2 list shows all three option with no yellow background color on the second option.

<option class="normalBG-inline" value="007775509">007775509 SEAT AY-ELA 777 RH STD TPL    </option>
<option class="yellowBG-inline" value="007775510">007775510 SEAT AY-ELA 777 RH STD TPL    </option>
<option class="normalBG-inline" value="007775511">007775511 SEAT AY-ELA 777 RH STD TPL    </option>

<option class="normalBG-inline" value="007775509" data-select2-id="41">007775509 SEAT AY-ELA 777 RH STD TPL    </option>
<option class="yellowBG-inline" value="007775510" data-select2-id="42">007775510 SEAT AY-ELA 777 RH STD TPL    </option>
<option class="normalBG-inline" value="007775511" data-select2-id="43">007775511 SEAT AY-ELA 777 RH STD TPL    </option>

[Natasha Sturrock]

This is a pretty common thing with select2. When you apply select2 to a <select>, it basically hides the original dropdown and creates its own HTML structure for the options. So, even though your original <option> tags have classes like yellowBG-inline and show the background color correctly, select2 doesn't automatically carry those styles over to its custom dropdown.

That’s why your background colors disappear once select2 kicks in.

How to fix it? Use select2’s templateResult option to control how each dropdown item is rendered. Inside that function, you can check the original option’s classes and add the same class to the new element select2 creates.

Something like this:

$('.generalLabel-input-pv-select').select2({
 dropdownCssClass: 'ui-widget ui-jqdialog zclass',
 width: 300,
 templateResult: function(data) {
   if (!data.id) {
     return data.text; // placeholder or non-selectable options
   }
   var $option = $('<span></span>').text(data.text);

   if ($(data.element).hasClass('yellowBG-inline')) {
     $option.addClass('yellowBG-inline');
   } else {
     $option.addClass('normalBG-inline');
   }
   return $option;
 }
});

Since you mentioned your list comes from the server sounds like a custom .net development project, make sure those classes are set correctly on the server side too. Then this client-side trick will make sure the colors show up in the select2 dropdown.

Hope that helps! Let me know if you want me to help with the CSS or a full working example.