TemplateResult 中的 select2 Font-Awesome + 文本无法正常工作

Question

我正在尝试使用 templateResult 来格式化我的 select2 个选择，以便在 select 文本

前面包含一个很棒的字体图标

不幸的是它不起作用，即使我遵循了文档。字体真棒图标显示，但文本不知何故在翻译中丢失

  function formatFA(icon) {

    if (!icon.id) { return icon.text; }
    var $icon = $(
      '<i class="fa fa-circle" style="color:green"></i> ' + icon.text + ' '
    );
    return $icon;

  };
  $('#gyr_ind').select2({
    templateResult: formatFA
  });

这是代码的js fiddle 看看我在说什么在行动

http://jsfiddle.net/46f9c7jy/

Answer 1

icon.text 在 <i> 标签声明之外，这样 $('<i></i>my-text'); 不会在标签内写入文本。

像这样的东西应该可以工作

var $icon = $('<i class="fa fa-circle"></i>')
  .css({ 'color': icon.text })
  .text(icon.text);

这是一个演示 http://jsfiddle.net/dhirajbodicherla/46f9c7jy/3/

如果文本必须在 <i> 之外，那么应该这样做

var $icon = $('<span></span>').append($('<i class="fa fa-circle"></i>').css({
    'color': icon.text
})).append(icon.text);

这是另一个演示 http://jsfiddle.net/dhirajbodicherla/46f9c7jy/4/

TemplateResult 中的 select2 Font-Awesome + 文本无法正常工作

select2 Font-Awesome + text in TemplateResult not working properly

jquery-select2

font-awesome

jquery-select2-4