如何在select2中添加图标？

Question

I using select2 version 4

I try like this :

$("select02").select2({
    placeholder: "<i class='fa fa-sitemap'></i>Branch name",
});

但是，它没起作用

示例如下: http://jsfiddle.net/fc1qevem/8/

是否有解决我的问题的任何解决方案？

- moses toh

---

你能否发布你的其余代码？ 样式表是否正确附加？ - Karl Gjertsen

@KarlGjertsen，http://jsfiddle.net/fc1qevem/8/ - moses toh

Answer 1

首先要阅读参考手册！

从官方的select2网站示例中；

function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
    '<span><img src="vendor/images/flags/' +  state.element.value.toLowerCase() + 
'.png" class="img-flag" /> ' + 
state.text +     '</span>'
 );
 return $state;
};

$(".js-example-templating").select2({
  templateResult: formatState
});

给你返回结果：

- user5928517

---

这不是他要求的。他想在搜索栏中有一个图标。 - Armin Hierstetter

谢谢你们！我喜欢你们的回答； - Mateus Gonçalves

回答问题之前一定要先仔细阅读问题 :) - Moonchild

Answer 2

我发现了这个问题：如何在select2中添加html占位符？

那么你需要做的是：

$("select02").select2({
  placeholder: '<i class="fa fa-sitemap"></i>Branch name',
  escapeMarkup : function(markup) {
    return markup;
  }
});

- user2353482

---

这是一个解决方案，可以将图标放置在select2中。需要使用两个属性来渲染图标。 - Mohamed Raza

Answer 3

使用图标而不是img，请使用：

function format (state) {
    if (!state.id) { return state.text; }
    return '<i class="fa fa-lg '+state.id.toLowerCase()+'"></i> '+state.text;
} 

$("#select2icon").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
});

- abhishek92

Answer 4

根据迁移指南，3.5.x版本之后不再使用formatResult或formatSelection。这些已被templateResult和templateSelection取代。

function iconFromValue(val){
    if(val.element){
        val = `<span class="select2-option-img"><img src="${val.element.value}"><span> ${val.text}`;
    }
    return val;
}

$(document).ready(function() {
    $('.select2').select2({
        templateResult: iconFromValue,
        templateSelection: iconFromValue,
        escapeMarkup: function(m) { return m; }
    });
}

- chpx

Answer 5

这里是一个可运行的示例：

function format(state) {
    if (!state.id) 
        return state.text; // optgroup
    return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}

$("#select2").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
});

用户上面的js。

- abhishek92

Answer 6

你差不多就做到了。你只需要添加 'escapeMarkup'。请参考下面的代码。

var select02 = $('#select02');

$(select02).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }],
     placeholder: "<i class='fa fa-sitemap'></i>Branch name",
     escapeMarkup: function (markup) { return markup; }
});

- Jeff Sieffert