更改select2插件中的选项颜色

Question

我正在使用select2插件，我想在某些选项上更改文本颜色，例如：

<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>

但是当我执行页面时，style无法正常工作。

Answer 1

如果要编辑选项的外观，则需要使用templating options of the select2

您将需要执行以下操作：

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

请注意，如果只希望某些选项变为红色，则需要在函数内部进行检查。

希望这会有所帮助。