Select2插件dropDown的配置

    近期公司开发页面，使用到了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" onchange="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版本不适用。