Select2不会格式化项目

Question

我不知道它是否与新的库等冲突，但我不能格式化选择的项目。它们不会以斜体和粗体格式显示。

http://jsfiddle.net/fcb960xh/2/

<select style="width: 300px">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

js

$(document).ready(function() {
    $('select').select2({
      // Specify format function for dropdown item
      formatResult: formatResult,
      // Specify format function for selected item
      formatSelection: formatSelection
    });
});

function formatResult(item) {
    if(!item.id) {
       return item.text;
    }
    // return item template
    return '<i style="color:#ff0000">' + item.text + '</i>';
}

function formatSelection(item) {
    // return selection template
    return '<b>' + item.text + '</b>';
}

Answer 1

您正在使用select2 4.0.0。事情已经和以前的版本不同了。

来自select2 4.0.0公告

Select2以前提供了多个选项来格式化结果列表和选择的选项，通常被称为“格式化者”，使用formatSelection和formatResult选项。由于“格式化者”也用于本地化(这也发生了变化)，因此它们被重命名为templateSelection和templateResult，它们的签名也发生了变化。

您应该使用templateResult和templateSelection，而不是formatResult和formatSelection。您还应该返回一个jQuery对象。这是更新的小提琴。

Answer 2

我还没有使用select2，但是一种快速的方法是向现有的css类添加样式

.select2-results__group{
    font-style: italic
}

看一看：https://jsfiddle.net/fcb960xh/9/