How to add an image to the Select2 option?

Question

I have a choice:

<select data-bind="options : PeriodeOptions, optionsValue : 'Periode', optionsText : function(item) { return AddLock(item)}" id="SelectPeriode"></select> 

And I have my future;

 //am - Fonction permettant d'ajouter le cadenas à côté de la Periode si elle est cloturée function AddLock(pItem) { if (!pItem.IsCloturePeriode) return pItem.Periode; var lTemplate = $('<span>' + pItem.Periode + '<img src="/Ressources/Images/Locked.png"/></span>'); return lTemplate; }; 

He sends me an object: <Please help!

Answer 1

I'm not sure if the question is marked incorrectly, but I do not see your select2 function in the code that you specified

however, here is a sample of select2 template code that will use the images in the selection and the result

 function formatData (data) { if (!data.id) { return data.text; } var $result= $( '<span><img src="/Ressources/Images/Locked.png"/> ' + data.text + '</span>' ); return $result; }; $("#SelectPeriode").select2({ templateResult: formatData, templateSelection: formatData });