jquery 在select2 V4菜单项中添加字体图标

ufj5ltwl 于 5个月前发布在 jQuery

关注(0)|答案(4)|浏览(76)

我试图在Select2 v4插件项目中显示fontawesome图标。但插件显示的是html，而不是生成实际的图标。这种方法与Select2 V3工作，但似乎不与v4。任何帮助是赞赏。谢谢
HTML

<div class="select2-wrapper">
    <select class="input icons_select2">
        <option value="fa-dribbble" data-icon="fa-dribbble">Dribbble</option>
        <option value="fa-dropbox" data-icon="fa-dropbox">Dropbox</option>
        <option value="fa-facebook" data-icon="fa-facebook">Facebook</option>
    </select>
</div>

字符串
JS

function iformat(icon) {
var originalOption = icon.element;
return '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text;
}
$('.icons_select2').select2({
width: "100%",
templateSelection: iformat,
templateResult: iformat
});

型
参见fiddle示例：http://jsfiddle.net/qCn6p/206/

jquery

来源：https://stackoverflow.com/questions/41981532/add-fontawesome-icons-into-select2-v4-dropdown-items

4条答案

按热度按时间

bqucvtff1#

这是您的更新fiddle
你必须像这样在jquery中 Package 你的元素：

function iformat(icon) {
    var originalOption = icon.element;
    return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '</span>');
}
$('.icons_select2').select2({
    width: "100%",
    templateSelection: iformat,
    templateResult: iformat,
    allowHtml: true
});

字符串

赞(0）回复(0）举报 5个月前

jum4pzuy2#

使用“escapeMarkup”选项如下

$('.icons_select2').select2({
    width: "100%",
    templateSelection: iformat,
    templateResult: iformat,
    escapeMarkup: function(m) {
        return m;
     }
});

字符串
http://jsfiddle.net/qCn6p/209/

赞(0）回复(0）举报 5个月前

gk7wooem3#

你可以用$.parseHTML() Package 返回。
示例：return $.parseHTML('<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text);

赞(0）回复(0）举报 5个月前

q35jwt9p4#

仅供参考，如果你为templateSelection/templateResult覆盖函数返回一个字符串，它将被转义（除非你也覆盖了escapeMarkup函数），但是如果你返回一个jquery对象，它将不会被转义。
有些示例还忽略了不带和id的格式化输入