JSFiddle - React, Tailwind, and code Playground

by Shashank

HTML

<script src="https://rawgit.com/brianreavis/selectize.js/master/dist/js/standalone/selectize.js"></script>
<link rel="stylesheet" href="https://rawgit.com/brianreavis/selectize.js/master/dist/css/selectize.default.css">
<Select id="SDistrict" class="form-control">
  <option value="1" data-color="yellow"> Mango </option>
  <option value="2" data-color="red"> Apple </option>
  <option value="3" data-color="orange"> Orange </option>
</Select>

JavaScript

$(document).ready(function() {

  $('#SDistrict').selectize({
    create: false,
    sortField: 'text',
    onInitialize: function() {
      var s = this;
      this.revertSettings.$children.each(function() {
        $.extend(s.options[this.value], $(this).data());
      });
    },
    onChange: function(value) {
      var option = this.options[value];
      alert(option.text + ' color is ' + option.color);
    }
  });
});