JSFiddle - React, Tailwind, and code Playground

by Sergio Crisostomo

HTML

<script src="https://cdn.jsdelivr.net/jquery.chained/0.9.9/jquery.chained.remote.min.js"></script>
<select id="estado">
  <option value="">Selecione</option>
  <option value="AC">Acre</option>
  <option value="AL">Alagoas</option>
  <option value="AP">Amapá</option>
  <option value="AM">Amazonas</option>
  <option value="BA">Bahia</option>
  <option value="CE">Ceará</option>
  <option value="DF">Distrito Federal</option>
  <option value="ES">Espirito Santo</option>
  <option value="GO">Goiás</option>
  <option value="MA">Maranhão</option>
  <option value="MS">Mato Grosso do Sul</option>
  <option value="MT">Mato Grosso</option>
  <option value="MG">Minas Gerais</option>
  <option value="PA">Pará</option>
  <option value="PB">Paraíba</option>
  <option value="PR">Paraná</option>
  <option value="PE">Pernambuco</option>
  <option value="PI">Piauí</option>
  <option value="RJ">Rio de Janeiro</option>
  <option value="RN">Rio Grande do Norte</option>
  <option value="RS">Rio Grande do Sul</option>
  <option value="RO">Rondônia</option>
  <option value="RR">Roraima</option>
  <option value="SC">Santa Catarina</option>
  <option value="SP">São Paulo</option>
  <option value="SE">Sergipe</option>
  <option value="TO">Tocantins</option>
</select>
<select id="municipio">
  <option>selecione um estado</option>
</select>

JavaScript

var estado = document.getElementById('estado');
var municipio = document.getElementById('municipio');

function buscaJSON(url, cb) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      var data = JSON.parse(request.responseText);
      cb(null, data);
    } else {
      cb('Error: ' + request.responseText);
    }
  };
  request.onerror = function() {
    cb('Unknown error');
  };

  request.send();
}

estado.addEventListener('change', processar);

function processar(e) {
  var estado = this.value;
  buscaJSON('https://gist.githubusercontent.com/eduardo-almeida-II/6e1caf8875949b38a68c/raw/5b1ede8cd5bc1959a8b02b21fcc02f576eb4ef4a/municipios.json', function(err, json) {
    var cidades = json[estado];
    municipio.innerHTML = '';
    cidades.forEach(function(cidade) {
      var opt = document.createElement('option');
      opt.value = opt.innerHTML = cidade;
      municipio.appendChild(opt);
    });
  });
}