CODEWITHSUNDEEP
jquery-select2
Italo Rodrigo
Italo Rodrigo

Reputation: 1785

change option color in select2 plugin

I am using the select2 plugin and I like to change the text color on some options like this:

<select class="js-example-basic-single">
    <option>item 1</option>
    <option style="color:red">item 2</option>
    <option>item 3</option>
    <option style="color:red">item 4</option>
</select>

But when I execute the page, the style not works.

Upvotes: 1

Views: 1795

Answers (1)

Ricardo Garcia Landete
Ricardo Garcia Landete

Reputation: 417

If you want to edit the appearance of your options you need to use the templating options of the select2

You will need to do something like this:

$('.js-example-basic-single').select2({
   templateSelection: function(data) {
       return $('<span style="color:red">' + data.text +'<span>');
   }
});

Be aware that if you only want some options to be red you will need to do the checks inside the function.

Hope this helps.

Upvotes: 2

Related Questions