在下拉列表中显示图像 select2

Question

我需要在 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>

Answer 1

formatSelection 和 formatResult 选项已在 select2 v4.0

中重命名为 templateSelection 和 templateResult

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>

在下拉列表中显示图像 select2

Display images in dropdown select2

javascript

jquery-select2