select2 以換行文本模式顯示下拉圖像和文本

Question

我需要在換行文本中顯示文本和圖像，如下圖所示

選擇后，它不顯示圖像，也不包裝（我希望同時顯示圖像和包裝的芯片）

我試過

 <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:200px" 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": "This is a product1 and new line" }, { "id": "Name2||SubName2||Product2||Desc2||Spec2||https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg", "text": "This is a product2 and new line" }, ] $('#framework').empty(); $("#framework").select2({ data: frameworks, templateResult: format, teamplateSelection: 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="vertical-align:middle; width: 50px; max-width: 100%; height: auto" />' + state.text; } </script>

Answer 1

使用自定義 flex 布局作為選項

 var frameworks = [{"id":"Name1||SubName1||Product1||Desc1||Spec1||https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg","text":"This is a product1 and new line"},{"id":"Name2||SubName2||Product2||Desc2||Spec2||https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg","text":"This is a product2 and new line"}] $('#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 `<div class="select2-center-option"> <span><img src="${(state.id.split("||")[5])}"/></span> <span>${state.text}</span> </div>` }

 .select2-container .select2-selection--multiple .select2-selection__rendered { white-space: break-spaces!important; } .select2-center-option, .select2-selection__choice { display: flex; align-items: center; gap: 5px; } .select2-center-option img { width: 50px; max-width: 100%; height: auto; margin-right: 5px; }

 <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:200px" class="full" multiple="multiple" data-placeholder="Select framework..."> <option></option> </select>