JSFiddle - React, Tailwind, and code Playground

by Rijo KP

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<select id="long" class="js-example-basic-multiple" multiple="multiple">
			<option data-custom="" value="all">All </option>
			<option data-custom="Lorem ipsum" value="#FF0000">Lorem ipsum dolor sit amet consectetur adipiscing elit</option>
			<option data-custom="Sed do" value="#00FF00">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</option>
			<option data-custom="Ut enim" value="#0000FF">Ut enim ad minim veniam quis nostrud exercitation</option>
			<option data-custom="Duis aute" value="#FFFF00">Duis aute irure dolor in reprehenderit in voluptate velit esse</option>
		</select>

CSS

select {width: 300px;}

tr {background: white;}
td {padding: 5px;border:1px solid #555;}

.hidden-course,
.hidden-location {
    display: none;
}

JavaScript

jQuery(function() {
				jQuery('#long').select2({
					templateSelection: function (selection) {
						return jQuery(selection.element).data('custom');
					}
				});
			});