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/

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

1 个答案: