Question

我正在尝试在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/

Answer 1

以下是您更新的fiddle

你必须将你的元素包装在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
});

Answer 2

使用“escapeMarkup”选项，如下所示

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

http://jsfiddle.net/qCn6p/209/

Answer 3

您可以使用scrapy.settings.Settings包装回报。

示例：$.parseHTML()

Answer 4

FYI如果你为templateSelection / templateResult重写的函数返回一个字符串，它将被转义（除非你也覆盖了escapeMarkup函数），但是如果你返回一个jquery对象，它将不会被转义。

某些示例也忽略了格式输入而没有和id

if (!icon.id) { return icon.text; }

请参阅此小提琴http://jsfiddle.net/dleffler/15myta6t/3/

在select2 V4下拉项目中添加fontawesome图标

4 个答案: