我正在尝试在 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
});
有关示例,请参阅小提琴:http://jsfiddle.net/qCn6p/206/
您更新的小提琴
你必须像这样将你的元素包装在jquery中:
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
});
使用"escapeMarkup"选项,如下所示
$('.icons_select2').select2({
width: "100%",
templateSelection: iformat,
templateResult: iformat,
escapeMarkup: function(m) {
return m;
}
});
http://jsfiddle.net/qCn6p/209/
您可以使用 $.parseHTML()
包装返回。
示例:return $.parseHTML('<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text);
仅供参考,如果您返回 templateSelection/templateResult 覆盖函数的字符串,它将被转义(除非您还覆盖 escapeMarkup 函数),但是如果您返回 jquery 对象,它不会被转义。
一些示例还忽略了没有 和 id 的格式输入
if (!icon.id) { return icon.text; }
看到这个小提琴 http://jsfiddle.net/dleffler/15myta6t/3/