JSFiddle - React, Tailwind, and code Playground

by Rico Sta. Cruz

HTML

<link rel="stylesheet" href="http://jasny.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://jasny.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<label>Color</label>
<select name="level[]" id="level" data-page="filter">
  <option value>Choose Level</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="green">Green</option>
</select>
<br>
<label>Types</label>
<select name="subject[]" id="subject" data-page="filter">
  <option value="">Choose something</option>
  <option value="apple">Apple</option>
</select>

<br>
<br>
<label id='output'>Output here</label>

JavaScript

var choices = {
  red: ["apple", "firetruck", "bricks"],
  green: ["leaves", "plants", "mucus"],
  orange: ["oranges", "autumn", "sunset"]
}

$(document).on('change', '#level', function() {
  var color = $(this).val();

  var subjectList = choices[color];

  subjectList = ["Choose something"].concat(subjectList)
  var $subject = $("#subject");
  $subject.empty();

  $.each(subjectList, function(index, value) {
    if (value == "Choose something") {
      $subject.append($("<option />").val(null).text(value));
    } else {
      $subject.append("<option value='" + value + "'>" + value + "</option>");
    };
  });
  $subject.focus()
});

$(document).on('change', '#level, #subject', updateOutput)

function updateOutput () {
  var level = $('#level').val()
  var subject = $('#subject').val()
  if (level && subject) {
    $('#output').html(level + ' ' + subject)
  } else {
    $('#output').html('')
  }
}

$(updateOutput)