How to render html in select2 options

Question

In this example of data loaded from a remote source I can see images and other html elements rendered as options. I\'d like to accomplish the same thing using data in a loc

Answer 1

Simply you can add another field with the html to your data array and make your own template using the templateResult option like so

JSFiddle Demo

var data = [{
   id: 0,
   text: 'enhancement',
   html: '
enhancement
'
}, {
   id: 1,
   text: 'bug',
   html: '
bug
This is some small text on a new line
'
}];

function template(data) {
    return data.html;
}

$("select").select2({
   data: data,
   templateResult: template,
   escapeMarkup: function(m) {
      return m;
   }
});