Q: multiselect selected option image The pictures are coming in the options, I want them to come when they are selected. can you help me ?


<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>



A: You can use templateSelection parameter to render the selected by default.


$("#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: I removed the ColdFusion code from this template because it is not really relevant to this issue.
