JSFiddle - React, Tailwind, and code Playground

by Gregory Nikitas

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<select id="producttype">
  <option value="0">Select an Option</option>
  <option value="1">goodopt</option>
  <option value="2">effectiveopt</option>
  <option value="3">socialopt</option>
</select>

<select id="goodopt" class="sub-select">
  <option value="0">Select an Option</option>
  <option value="1">1 goodopt</option>
  <option value="2">2 goodopt</option>
  <option value="3">3 goodopt</option>
</select>

<select id="effectiveopt" class="sub-select">
  <option value="0">Select an Option</option>
  <option value="1">1 effectiveopt</option>
  <option value="2">2 effectiveopt</option>
  <option value="3">3 effectiveopt</option>
</select>

<select id="socialopt" class="sub-select">
  <option value="0">Select an Option</option>
  <option value="1">1 socialopt</option>
  <option value="2">2 socialopt</option>
  <option value="3">3 socialopt</option>
</select>

JavaScript

var selectedStoredValue = "";

window.toggle = function() {
  $('select#goodopt').prop('disabled', true);
  $('select#effectiveopt').prop('disabled', true);
  $('select#socialopt').prop('disabled', true);
}


$(document).ready(function() {
  toggle();

  $("#producttype").change(function() {
    toggle();
    if ($("#producttype").prop('selectedIndex') == "1")
      $('select#goodopt').prop('disabled', false);
    if ($("#producttype").prop('selectedIndex') == "2")
      $('select#effectiveopt').prop('disabled', false);
    if ($("#producttype").prop('selectedIndex') == "3")
      $('select#socialopt').prop('disabled', false);
    selectedStoredValue = "";
  });

  $("#goodopt,#effectiveopt,#socialopt").change(function() {
    selectedStoredValue = $("option:selected", this).text();
    alert(selectedStoredValue);
  });
});