JSFiddle - React, Tailwind, and code Playground

by naferoozi

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//selectize.github.io/selectize.js/js/selectize.js"></script>
<link rel="stylesheet" href="//selectize.github.io/selectize.js/css/normalize.css">
<link rel="stylesheet" href="//selectize.github.io/selectize.js/css/styles.css">
<link rel="stylesheet" href="https://selectize.github.io/selectize.js/css/selectize.default.css">
<select id="select" class="control-form" data-placeholder="Select a person...">
  <option value="">None</option>
  <option value="4">Thomas Edison</option>
  <option value="1">Nikola</option>
  <option value="3">Nikola Tesla</option>
  <option value="5">Arnold Schwarzenegger</option>
</select>
<div class="log"></div>

JavaScript

$(function() {
  $('#select').selectize({
    create: true,
    sortField: {
      field: 'text',
      direction: 'asc'
    },
    onChange: function(value) {
      $(".log").append("Value:" + value + "<br />");
      $(".log").append("Text:" +$("#select option:selected").text() + "<br />");
    },
    dropdownParent: 'body'
  });
});