Select2 Html Template
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select style="width: 50%"></select>
JavaScript
var data = [{
id: 0,
text: 'enhancement',
html: '<div style="color:green">weqwqwe</div>'
}, {
id: 1,
text: 'bug',
html: '<div style="color:red">fasfsaafs</div><div><small>This is somesasdasddasdas small text on a new line</small></div>'
}];
function template(data) {
return data.html;
}
$("select").select2({
data: data,
templateResult: template,
escapeMarkup: function(m) {
return m;
}
});