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.