title: select2 draw image and text on selected option
body: <p>I have a select2 with a list of countries with their flag. To display the select, shows the flag and the country, but the selected text does not display the flag.</p>
  
  <p><a href="https://i.stack.imgur.com/ll7r4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ll7r4.png" alt="enter image description here"></a></p>
  
  <p>This is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#cmbIdioma").select2({
   templateResult: function (idioma) {
     var $span = $("&lt;span&gt;&lt;img src='https://www.free-country-flags.com/countries/"+idioma.id+"/1/tiny/" + idioma.id + ".png'/&gt; " + idioma.text + "&lt;/span&gt;");
     return $span;
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/&gt;
  
  &lt;div&gt;
    &lt;select id="cmbIdioma" style="width: 200px;"&gt;
      &lt;option value="Spain" selected&gt;Spain&lt;/option&gt;
      &lt;option value="United_Kingdom"&gt;United Kingdom&lt;/option&gt;
    &lt;/select&gt;                            
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your time!</p>