JSFiddle - React, Tailwind, and code Playground

by Leonardo Santos

HTML

<script src="https://cdn.jsdelivr.net/jquery.selectric/1.9.5/jquery.selectric.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.selectric/1.9.5/selectric.css">
<script src="https://cdn.jsdelivr.net/json2/0.2/json2.min.js"></script>
<select name="" id="MasterWrapUps">
  <option class="dispositionMenuOption" value="00">Lorem ipsum dolor.</option>
  <option class="dispositionMenuOption" value="01">Beatae, eum, tempora.</option>
  <option class="dispositionMenuOption" value="02">Nihil, voluptate officia?</option>
  <option class="dispositionMenuOption" value="03">Iste reprehenderit, corrupti?</option>
  <option class="dispositionMenuOption" value="04">Aut, quam eos!</option>
  <option class="dispositionMenuOption" value="05">Quia, voluptas tempore.</option>
  <option class="dispositionMenuOption" value="06">Nisi, ullam, omnis.</option>
  <option class="dispositionMenuOption" value="07">Laudantium, id, incidunt.</option>
  <option class="dispositionMenuOption" value="08">Et, repellendus, magnam.</option>
  <option class="dispositionMenuOption" value="09">Fugit, sint, illum!</option>
</select>

JavaScript

$('#MasterWrapUps').selectric();

var isOpen = false;
var selectricData = $('#MasterWrapUps').data('selectric');

$('#MasterWrapUps').on('selectric-open', function (e) {
	var status = "noattempt";

	if (!isOpen) {
  	selectricData.close();
  
    $.ajax({
      type: "POST",
      url: "/echo/json/",
      dataType: "json",
      cache: false,
      data: {
        // emulate ajax delay on jsfiddle
        delay: 1
      },
      success: function (data) {
        if ( data && ! $.isEmptyObject(data) ) {
          status = data.status;
        }

        attrWrapUpMenu(status);
      }
    });
  
  }

});

function customIsAllowed() {
	return !!(Math.random()+.5|0);
}

function attrWrapUpMenu(status) {
  $('.dispositionMenuOption').each(function (index, element) {

    var option = $(element);

    if ( customIsAllowed(status, option) ) {

      option.prop('disabled', false);

    } else {

      if( option.prop('selected') ) {
        $('#MasterWrapUps').val('0');
      }

      option.prop('disabled', true);
    }

  });
  
  isOpen = true;
  selectricData.refresh();
  selectricData.open();
  isOpen = false;
}