Javascript 如何在select2的选定项中显示图标？

我有一个select2插件，格式化了

。我在右边添加了一个很棒的图标

问题是，当我选择任何带有图标的项目时，当下拉列表关闭时，图标不会显示在当前选择的项目中。我该怎么解决呢？格式化功能可能有误吗

这里有一个jsfiddle，您可以在其中尝试：

JS

$("#mysel").select2({
    width: "100%",
    formatResult: function(referencia) {
        if (!referencia.id) return referencia.text; // optgroup

        if ($(referencia.element).data('active') == "1") {
            return referencia.text + "<i class='fa fa-check-circle'></i>";
        } else {
            return referencia.text;
        }
    }
});

body {
    padding: 20px;
}

.fa-check-circle{
    float: right;
    position: relative;
    line-height: 20px;
}

HTML

<select id="mysel">
    <optgroup label="First group">
        <option value="0" data-active="1">Hello</option>
        <option value="1" data-active="0">Stack</option>
    </optgroup>
    <optgroup label="Second group">
        <option value="2" data-active="1">Overflow</option>
        <option value="3" data-active="1">Friends</option>
    </optgroup>
</select>

你好
堆栈
溢流
朋友

如果还想更改所选元素的外观，则需要使用

formatSelection

：

formatSelection: function (referencia) {
    if ($(referencia.element).data('active') == "1") {
        return referencia.text + "<i class='fa fa-check-circle'></i>";
    } else {
        return referencia.text;
    }
}

formatSelection:函数（referencea）{
if（$（referecia.element）.data（'active'）=“1”）{
返回referencea.text+“”；
}否则{
返回referencea.text；
}
}

更新的fiddle:

在当前版本（2019）中，formatSelection被templateSelection取代。