JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<select id='select2-id'>
<option value="one">Value One</option>
<option value="two">Value Two</option>
<option value="three">Value Three</option>
</select>
<p id="message">&nbsp;</p>
<button id="change-trigger">
Standard Change Trigger
</button>
<button id="change-select2-trigger">
Select2 Change Trigger
</button>

CSS

#select2-id {
  width: 100%;
}

JavaScript

$(document).ready(function () {
  var $select = $('#select2-id'), $message = $('#message');
  $select.select2();
  
  $select.on('change', function () {
    $message.html('I heard a global change event');
  });
  
  $('#change-trigger').on('click', function () {
    // Reset Message
    $message.html('&nbsp;');
    $select.val('two').trigger('change');
  });
  
  $('#change-select2-trigger').on('click', function () {
    // Reset Message
    $message.html('&nbsp;');
    $select.val('three').trigger('change.select2');
  });
});