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

我试图在Select2 v4下拉项目中显示fontawesome图标。 但是下拉列表显示的是html并且没有生成实际图标。 此方法适用于select2 V3，但似乎不适用于v4。 任何帮助表示赞赏。 谢谢

HTML 

  Dribbble Dropbox Facebook

JS 

 function iformat(icon) { var originalOption = icon.element; return ' ' + 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 $(' ' + icon.text + ''); } $('.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(' ' + icon.text);

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

一些示例还忽略了没有和id的格式输入 

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

看到这个小提琴http://jsfiddle.net/dleffler/15myta6t/3/

Interesting Posts