[英]How to add icon in select2?
我使用 select2 版本 4
我尝试这样:
$("select02").select2({
placeholder: "<i class='fa fa-sitemap'></i>Branch name",
});
但是,它不起作用
演示是这样的: http : //jsfiddle.net/fc1qevem/8/
有什么解决方案可以解决我的问题?
请务必先阅读参考/手册!
来自他们网站上的官方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
});
给你结果:
所以你需要的是:
$("select02").select2({
placeholder: '<i class="fa fa-sitemap"></i>Branch name',
escapeMarkup : function(markup) {
return markup;
}
});
对于图标而不是 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; }
});
这是工作示例:
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 之上的用户。
你几乎拥有它。 您只需要添加“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; }
});
根据迁移指南,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; }
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.