在下拉菜单中显示图像select2

问题描述

我需要在select2中显示每个项目的图像

我尝试过

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

  <label for="framework"><b>Framework</b></label>
  <select id="framework" name="framework" style="width:100%" class="full" multiple="multiple" data-placeholder="Select framework..."><option></option></select>


<script>
var frameworks = [{
    "id": "Name1||SubName1||Product1||Desc1||Spec1||https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg","text": "Product1"
},{
    "id": "Name2||SubName2||Product2||Desc2||Spec2||https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg","text": "Product2"
},]

$('#framework').empty();
$("#framework").select2({
    data: frameworks,formatResult: format,formatSelection: format,escapeMarkup: function(m) {
        return m;
    },placeholder: " Click here to select",}).val(null).trigger("change");

function format(state) {
    if (!state.id) return state.text; // optgroup
    return '<img src="' + state.id.split("||")[5] + ' style="width: 50px; max-width: 100%; height: auto" title="Click for the larger version." />' + state.text;
}

</script>

解决方法

在select2 formatSelection中，formatResult和templateSelection选项已重命名为templateResult和v4.0

https://select2.org/upgrading/migrating-from-35#renamed-templating-options

var frameworks = [{"id":"Name1||SubName1||Product1||Desc1||Spec1||https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg","text":"Product1"},{"id":"Name2||SubName2||Product2||Desc2||Spec2||https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg","text":"Product2"}]

$('#framework').empty();
$("#framework").select2({
  data: frameworks,templateResult: format,templateSelection: format,escapeMarkup: function(m) {
    return m;
  },placeholder: " Click here to select",}).val(null).trigger("change");

function format(state) {
  if (!state.id) return state.text; // optgroup
  return '<img src="' + state.id.split("||")[5] + '" style="width: 50px; max-width: 100%; height: auto" title="Click for the larger version." />' + state.text;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<label for="framework"><b>Framework</b></label>
<select id="framework" name="framework" style="width:100%" class="full" multiple="multiple" data-placeholder="Select framework...">
  <option></option>
</select>

javascript jquery-select2