JSFiddle - React, Tailwind, and code Playground

HTML

<select id = "estados" onchange="myFunction()">
    <option></option>
</select>

<select id = "cidade">  
    <option></option>
</select>

JavaScript

var select = document.getElementById("estados"); 
var cidade = document.getElementById("cidade"); 
var options = ["São Paulo", "Rio de Janeiro"]; 
var cidade1 = ["São Paulo", "Itápolis", "Araraquara", "Ribeirão Preto", "Jacareí"];
var cidade2 = ["Rio de Janeiro", "Niteroi", "Petropolis", "Belford Roxo", "Nova Iguaçu"];

for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    //console.log(el)
    select.appendChild(el);
}

myFunction  = function (){
	if(select){
      var t = document.getElementById("estados");
      var selectedText = t.options[t.selectedIndex].text;

      if(selectedText == 'São Paulo'){
          for(var j = 0; j < cidade1.length; j++) {
              var opt = cidade1[j];
              var el = document.createElement("option");
              el.textContent = opt;
              el.value = opt;
              cidade.appendChild(el);
          }   
      }

      if(selectedText == 'Rio de Janeiro'){
          for(var j = 0; j < cidade2.length; j++) {
              var opt = cidade2[j];
              var el = document.createElement("option");
              el.textContent = opt;
              el.value = opt;
              cidade.appendChild(el);
          }   
      }
  }
}