I want to add a class to a newly selected option/tag within a select2 multiple select element.
My approach is to use the templateSelection callback, but then the class is added to every selected option/tag when the element is initialized.
Could I use the select2:select to flag a newly added option/tag (like adding a new attribute to the data)?
Thank you very much. All the best, Phantom
HTML
<select id="example" multiple="multiple" style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY" selected>May</option>
<option value="JUN" selected>June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
Javascript
$('#example').select2({
placeholder: 'Select a month',
templateSelection: function (data, container) {
$(container).addClass('classHighlight');
return data.text;
}
});
$('#example').on('select2:select', function(e) {
console.log('Could I use this event?')
console.log(e.params.data);
});