title: Select2 add image icon to option dynamically
body: <p>This is what select2.github.io gives you:</p>
  
  <pre><code>function addIcons(opt) {
      if (!opt.id) {
          return opt.text;
      }
      var $opt = $(
              '&lt;span&gt;&lt;img src="/images/flags/' + opt.element.value.toLowerCase() + '.png" class="img-flag" /&gt; ' + opt.text + '&lt;/span&gt;'
              );
      return $opt;
  }
  </code></pre>
  
  <p>I'd like to add a data-image attribute to my options:</p>
  
  <pre><code>&lt;option value="flag" data-image="/images/flags/flag.png"&gt;Country 1&lt;/option&gt;
  </code></pre>
  
  <p>and log it in the function:</p>
  
  <pre><code>function addIcons(opt) {
      if (!opt.id) {
          return opt.text;
      }
  
      var optimage = opt.attr('data-image');
      var $opt = $(
              '&lt;span&gt;&lt;img src="/images/flags/' + optimage + '" class="img-flag" /&gt; ' + opt.text + '&lt;/span&gt;'
              );
      return $opt;
  }
  </code></pre>
  
  <p>Sadly, a simple console.log(opt); doesn't return anything in the function, so I can't see if I can access my data-image attribute. The above block of code returns an error, so this obviously doesn't work. Any suggestions on this matter?</p>