多选所选选项图像答案

【问题标题】：multiselect selected option image多选所选选项图像
【发布时间】：2022-11-18 00:14:07
【问题描述】：

图片出现在选项中，我希望它们在被选中时出现。你能帮助我吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

    <script>
      $("##features").select2({
        templateResult: function(idioma) {
          var $span = $("<span><img  style='width:20px' src='http://controlpanel.granolegacy.com/documents/granolegacy/feature_photo/" + idioma.title + "'/> " + idioma.text + "</span>");
          return $span;
        }
      });
    </script>
  </cfoutput>
</select>

【问题讨论】：

请注意，$("##features") 中不应该有 2 x #
它必须像那样，因为我回来了 coldfusion le 输出
你是如何触发图像检索的？我没有看到 click 事件，这是 .select2() 调用的一部分吗？开发工具网络面板显示什么？是在抓取图片还是没有触发图片请求？有什么错误吗？

标签： javascript jquery coldfusion jquery-select2

【解决方案1】：

您可以使用 templateSelection 参数来默认呈现所选内容。

$("#features").select2({
  templateResult: itemTemplate,
  templateSelection: itemTemplate
});

function itemTemplate(idioma) {
  var $span = $("<span><img  style='width:20px' src='http://controlpanel.granolegacy.com/documents/granolegacy/feature_photo/" + idioma.title + "'/> " + idioma.text + "</span>");
  return $span;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select name="features" multiple id="features" style="width: 100%;">
  <option value="#id#" title="#photo#" selected>#feature#</option>
</select>

PS：我从这个模板中删除了 ColdFusion 代码，因为它与这个问题无关。

【讨论】：