本文共 1781 字，大约阅读时间需要 5 分钟。

    近期公司开发页面，使用到了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 = $(    ' ' + state.text + ''  );  return $state;};$(".js-example-templating").select2({  templateResult: formatState});

完美解决我的问题，最上面的图就是我解决后的图片，select2有很多参数可以设置，大家可以自行百度，这里只是说了一下大概的解决方案，具体怎么做还是要大家自己去做，纸上得来终觉浅，绝知此事要躬行。且行且积累。

最后附上我的代码:

html:

   
     
            #foreach($file in $chgFLByCp)        $!{file.path}        #end      
   

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 = '';		  }else if (changeType == 'deleted') {			 idesc = '';		  }else if (changeType == 'modified') {		         idesc = '';		  }						  if(isBinary=="1"){				return $(		             ''+ idesc + state.text + '' +''	              	 );		   }else{			if(hasComment=="0"){			    return $(			        ''+ idesc + state.text + '' +''		            );		        }else{		           return $(		                ''+ idesc + state.text+''	                   );	               }	          }            };    $("#diffFLByCp_content").select2({        templateResult: formatState;     });});

注意：要注意select2的版本，本文章讲述的是4.0.0以后的版本，3.5.3版本不适用。