jquery-select2 - 模板结果中的 select2 Font-Awesome + 文本无法正常工作

Question

我正在尝试使用 templateResult 来格式化我的 select2 选项，以在选择文本前面包含一个 fontawesome 图标

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

  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小提琴，看看我在说什么

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/