近期公司开发页面,使用到了select2的js插件--select2.full.min.js,我们有个需求就是在option的text内容前面和后面要动态的加上图标,如图:
面临问题:使用select2,option的下拉框会经过处理变成<span>标签在页面上显示,所以无法再option上进行添加,而且<option>标签不支持后面加图标。
问题解决:查找资料,在select官网上找到了相应的example,网址:https://select2.org/,图片如下:
可以在选项前加图片,对应js代码:
function formatState (state) {
if (!state.id) {
return state.text;
}
var baseUrl = "/user/pages/images/flags";
var $state = $(
'<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
};
$(".js-example-templating").select2({
templateResult: formatState
});
完美解决我的问题,最上面的图就是我解决后的图片,select2有很多参数可以设置,大家可以自行百度,这里只是说了一下大概的解决方案,具体怎么做还是要大家自己去做,纸上得来终觉浅,绝知此事要躬行。且行且积累。
最后附上我的代码:
html:
<div class="col-md-12">
<select id="diffFLByCp_content" class="select2 form-control" data-show-subtext="true" οnchange="showFile(this.value)">
#foreach($file in $chgFLByCp)
<option id="$!{file.id}" data-fileName="$!{file.fileName}" data-hasComment="$!{file.hasComment}"
data-changeType="$!{file.changeType}" data-isBinary="$!{file.isBinary}">$!{file.path}</option>
#end
</select>
</div>
js:
$(function(){
function formatState (state) {
if (!state.id) {
return state.text;
}
var obj = $(state.element);
var filePath = obj.html();
var changeType = obj.data("changetype");
var hasComment = obj.data("hascomment");
var isBinary = obj.data("isbinary");
var idesc;
if(changeType == 'added'){
idesc = '<i class="fa fa-plus-circle font-green-jungle" style="padding-right:5px"></i>';
}else if (changeType == 'deleted') {
idesc = '<i class="fa fa-minus-circle font-red-flamingo" style="padding-right:5px"></i>';
}else if (changeType == 'modified') {
idesc = '<i class="fa fa-adjust font-blue" style="padding-right:5px"></i>';
}
if(isBinary=="1"){
return $(
'<span>'+ idesc + state.text + '<i class="fa fa-download" style="color:#1bc098;padding-left:5px"></i>' +'</span>'
);
}else{
if(hasComment=="0"){
return $(
'<span>'+ idesc + state.text + '<i class="fa fa-commenting" style="color:#ED6B75;padding-left:5px"></i>' +'</span>'
);
}else{
return $(
'<span>'+ idesc + state.text+'</span>'
);
}
}
};
$("#diffFLByCp_content").select2({
templateResult: formatState;
});
});
注意:要注意select2的版本,本文章讲述的是4.0.0以后的版本,3.5.3版本不适用。