JSFiddle - React, Tailwind, and code Playground

by S.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<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);
});