JSFiddle - React, Tailwind, and code Playground

by k_24

HTML

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<select class="form-control" id="campus" name="campus" required="" title="Campus">
        <option value="AIMNAT" style="alignment-adjust:middle;" selected="selected">Select Your Nearest Location</option>
        <option value="AMA">Atlanta, GA</option>
        <option value="AMD">Dallas, TX</option>
        <option value="AMH">Houston, TX</option>
        <option value="AMI">Indianapolis, IN</option>
        <option value="AMK">Kansas City, MO</option>
        <option value="AIML">Las Vegas, NV</option>
        <option value="AMO">Orlando, FL</option>
        <option value="AMP">Philadelphia, PA</option>
        <option value="AMS">San Francisco, CA</option>
        <option value="AMN">Virginia Beach, VA</option>
        <option value="AMM">Washington, DC</option>

        </select>
<select id='dates'>
</select>

JavaScript

var locations = {
  AMA : { 
      0: "August 19-20",
      1: "September 19-20",
      2: "January 19-20"
      },
  AMH : {
      0: "August 19-21",
      1: "September 19-21",
      2: "January 19-21"
  },
 AIML : {
      0: "August 19-22",
      1: "September 19-22",
      2: "January 19-22"
  }
};

// when user selects a location
$('#campus').on('change', function() {
  // get selected option
  var location = $('#campus').find(':selected').val();
  // clear the pervious options for dates
  $('#dates').empty();

  // popluate dates
  $.each(locations[location], function(index) {
      $('#dates').append('<option value="' + index + '">' + this + "</option>");
  });
});