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

How to display an icon in the chosen item of select2?

本文关键字：显示 显示图 图标 select2      更新时间：2023-09-26

我有一个<options>格式化的select2插件。我在右边添加了一个漂亮的图标。

问题是，当我选择任何有图标的项目时，当下拉菜单关闭时，图标不会显示在所选的当前项目中。怎么解呢?可能是格式功能出错了?

这里是一个jsfiddle，你可以尝试:http://jsfiddle.net/uAnLJ/18/

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;
        }
    }
});
CSS

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


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

更新小提琴:http://jsfiddle.net/uAnLJ/22/

相关文章：