JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<input id="uppercase" type="button" value="UPPERCASE"/>
<input id="lowercase" type="button" value="lowercase"/>
<input id="newdata" type="button" value="New data"/>
<br/>
<select></select>

CSS

select {
   width: 200px
}

JavaScript

var pills = [{id:0, text: "red"}, {id:1, text: "blue"}]; 

$.fn.select2.amd.define('select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
    function (ArrayAdapter, Utils) {
        function CustomDataAdapter ($element, options) {
 	        CustomDataAdapter.__super__.constructor.call(this, $element, options);
        }
        Utils.Extend(CustomDataAdapter, ArrayAdapter);
		CustomDataAdapter.prototype.updateOptions = function (data) {
            this.$element.find('option').remove();
            this.addOptions(this.convertToOptions(data));
        }        
        return CustomDataAdapter;
    }
);

var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');
var sel = $('select').select2({
	dataAdapter: customAdapter,
    data: pills
});

$('#uppercase').click(function() {
    $.each(pills, function(idx, val) {
        pills[idx].text = val.text.toUpperCase();
    });
    sel.data('select2').dataAdapter.updateOptions(pills);    
});

$('#lowercase').click(function() {
    $.each(pills, function(idx, val) {
        pills[idx].text = val.text.toLowerCase();
    }); 
    sel.data('select2').dataAdapter.updateOptions(pills);
});

$('#newdata').click(function() {
    pills = [
	    { id: 0, text: 'enhancement' },
        { id: 1, text: 'bug' },
        { id: 2, text: 'duplicate' },
        { id: 3, text: 'invalid' },
        { id: 4, text: 'wontfix' }
    ];
    sel.data('select2').dataAdapter.updateOptions(pills);
});