Displaying images in select2 based on data attributes on options - jquery-select2

Question

I want to do something with Select2 like the templating example but I'm not using a predefined set of images so need to modify it somewhat.
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 element.value I could use element.attr('data-thumb') but when I do that I get element.attr is not a function
HTML
<select>
<option value="A" data-thumb="a.jpg">A</option>
<option value="B" data-thumb="b.jpg">B</option>
<option value="C" data-thumb="c.jpg">C</option>
</select>
JS
function productStyles(selection) {
if (!selection.id) { return selection.text; }
var $selection = $(
'<img src="' + selection.element.attr('data-thumb')+ '"> ' + selection.text
);
return $selection;
};
$('.img-changer').select2({
templateResult: productStyles
});
Is it possible to access data attributes using .element or do I need another approach and if so, what would that be?

Answer 1

Turns out what I needed was var thumb = $(selection.element).data('thumb').
function productStyles(selection) {
if (!selection.id) { return selection.text; }
var thumb = $(selection.element).data('thumb');
if(!thumb){
return selection.text;
} else {
var $selection = $(
'<img src="' + thumb + '" alt=""><span class="img-changer-text">' + $(selection.element).text() + '</span>'
);
return $selection;
}
}

Answer 2

<option class="img class" value=""></option>
function formatSelect2(o) {
if (!o.id)
return o.text;
else
return $("<span><i class='" + $(o.element).attr("class") + "'></i> " + o.text + "</span>"); }
$('#Category-Add').select2({
width: '100%',
templateResult: formatSelect2,
templateSelection: formatSelect2,
theme: "classic"
});