求助：如何实现Select2多选框仅在选中选项时显示图片

你需要区分Select2下拉列表的选项渲染和已选中项的渲染逻辑，通过templateResult控制下拉选项仅显示文字，templateSelection控制选中后区域显示图片+文字，同时要修正初始化代码的位置避免重复执行，具体修改如下：

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">

<select name="features" multiple id="features" style="width: 100%;">
  <cfoutput query="get_features">
    <option 
      value="#id#" 
      data-photo="#photo#" 
      <cfif listFind(degerler, id)>selected</cfif>
    >#feature#</option>
  </cfoutput>
</select>

<script>
  $("#features").select2({
    // 下拉列表中的选项仅展示文字
    templateResult: function(item) {
      return item.text;
    },
    // 已选中的选项展示图片+文字
    templateSelection: function(item) {
      if (!item.id) {
        return item.text;
      }
      // 通过自定义数据属性获取图片路径，语义更规范
      return $("<span><img style='width:20px; margin-right:5px;' src='http://controlpanel.granolegacy.com/documents/granolegacy/feature_photo/" + item.element.dataset.photo + "'/> " + item.text + "</span>");
    }
  });
</script>

关键修改点说明 #

• 将Select2初始化脚本移出<cfoutput>循环，避免多次重复初始化插件引发异常。
• 把原title属性替换为data-photo自定义数据属性，用于存储图片路径，语义更清晰。
• templateResult函数仅返回选项文本，让下拉列表里的选项只显示文字。
• templateSelection函数专门处理已选中项的渲染，判断选项存在有效ID时（排除默认占位符），生成包含图片的元素。

内容的提问来源于stack exchange，提问作者Sefa KAÇMAZ