JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<form  id='picker'>
  <select id='state'>
    <option value="">--</option>
    <option value="MO">Missouri</option>
    <option value="WA">Washington</option>
    <option value="CA">California</option>
  </select>
  <select id='cities'></select>
</form>

JavaScript

var citystore = [];
 citystore[0] = ['CA','San Francisco'];
 citystore[1] = ['CA','Los Angeles'];
 citystore[2] = ['CA','San Diego'];
 citystore[3] = ['MO','St. Louis'];
 citystore[4] = ['MO','kansas City'];
 citystore[5] = ['WA','Seattle'];
 citystore[6] = ['WA','Spokane'];

 window.onload = function() {
  document.getElementById('state').onchange = filterCites;
 }
 function filterCites() {
  var state = this.value;
  var city = document.getElementById('cities');
  city.options.length = 0;

  for(var i = 0; i < citystore.length; ++i) {
    var st = citystore[i][0];
    if(st === state) {
      var opt = new Option(citystore[i][1]);
      try{
        city.add(opt,null);
      } catch(e) {
        city.add(opt);
      }
    }
  }
 }