在下拉选择2中显示图像

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

在 select2 v4.0 ， formatSelection和formatResult选项已重命名为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>