Select2: Images in options

data must be supplied as data: <JSON data with id, text and img> in real cases

by Jithin Raj P R

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<select id="myval" style>
  <option value=""></option>
  <optgroup label="My First Group">
    <option value="0" data-card="Master" data-exp-date="01/22">Hello!!!</option>
    <option value="1" data-card="Visa" data-exp-date="23/30" >Dot Circle 1</option>
    <option value="2" data-card="American" data-exp-date="09/23">Dot Circle 2</option>
  </optgroup>
  <optgroup label="My Second Group">
    <option value="2" data-card="Diners Club" data-exp-date="01/43">Dot Circle 3</option>
    <option value="3" data-card="JCB" data-exp-date="12/26">Dot Circle 4</option>
    <option value="3" data-card="Visa" data-exp-date="06/20">Dot Circle 5</option>
  </optgroup>
</select>

CSS

.fa-dot-circle-o {
    color:green;
}

JavaScript

function format (option) {
			//console.log(option);
			if (!option.id) { return option.text; }
			var ob = option.text + '<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w64" />';	// replace image source with option.img (available in JSON)
			return ob;
		};
    
  $("#myval").select2({
  		placeholder: "Select something!!",
	    width: "50%",
      allowClear: true,
	    templateResult: format,
	    templateSelection:format ,
      escapeMarkup: function (m) {
				return m;
			}
	},'data');


$("#myval").change(function(){
 console.log($(this).find(":selected").data("card"));
 console.log($(this).find(":selected").data("card-num"));
 //console.log($(this).find(":selected").data("exp-date"));
});