title: Displaying images in select2 based on data attributes on options
body: <p>I want to do something with Select2 like the <a href="https://select2.github.io/examples.html#templating" rel="nofollow">templating example</a> but I'm not using a predefined set of images so need to modify it somewhat.</p>
  
  <p>I thought I could add the path to the image I want to display with a data attribute on each option and then instead of <code>element.value</code> I could use <code>element.attr('data-thumb')</code> but when I do that I get <em>element.attr is not a function</em></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select&gt;
    &lt;option value="A" data-thumb="a.jpg"&gt;A&lt;/option&gt;
    &lt;option value="B" data-thumb="b.jpg"&gt;B&lt;/option&gt;
    &lt;option value="C" data-thumb="c.jpg"&gt;C&lt;/option&gt;  
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function productStyles(selection) {
      if (!selection.id) { return selection.text; }
      var $selection = $(
        '&lt;img src="' + selection.element.attr('data-thumb')+ '"&gt; ' + selection.text
      );
      return $selection;
  };
  
  $('.img-changer').select2({
      templateResult: productStyles
  });
  </code></pre>
  
  <p>Is it possible to access data attributes using <code>.element</code> or do I need another approach and if so, what would that be?</p>