JSFiddle - React, Tailwind, and code Playground

by JorgePalaciosZaratiegui

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<div class="col-md-7">
<select id="id-gci-main" name="id_gci_main" class="js-states form-control" style="width: 100%"></select>
</div>

JavaScript

var data1 = [
            {
                id: 0,
                text: 'YY',
                s3_key: 'https://select2.org/user/pages/images/flags/ks.png'
            },
            {
                id: 1,
                text: 'BB',
                s3_key: 'https://select2.org/user/pages/images/flags/ok.png'
            },
            {
                id: 2,
                text: 'AAA',
                s3_key: 'https://select2.org/user/pages/images/flags/ar.png'
            }
        ];
        
function templateSelectionFn(selection) {
  //console.log( 'selection : ', selection );
  
  var $selection = $(
    '<div></div>'
  );
  
   $selection.text(selection.text + '_aaa');
   $selection.attr("data-s3_key", selection.s3_key);
   
   // only for demo
   var $img = $('<img />');
   $img.attr("src", selection.s3_key);
   $img.attr("width", "24");
   $selection.append($img);
   
   return $selection;
}      
        
        

$("#id-gci-main").select2({
	closeOnSelect: true,
  allowClear: true,
  placeholder: '',
  data: data1,
  templateSelection: templateSelectionFn    
});