JSFiddle - React, Tailwind, and code Playground

by Jorge Ramos

HTML

<select name="secao" id="secao">
  <option value="0">Selecione o Estado</option>
  <option value="1">RS</option>
  <option value="2">SC</option>
  <option value="3">PR</option>
  <option value="4">MG</option>
</select>

<select name="secaoEscolhida" id="secaoEscolhida"></select>

JavaScript

let secao = document.querySelector( '#secao' );
let rs = [ "Grêmio", "Inter" ];
let sc = [ "Chapecoense", "Avaí" ];
let pr = [ "Coritiba", "Paraná" ];
let mg = [ "Cruzeiro", "Atlético-MG" ];

secao.addEventListener( 'change', () => {
	switch( secao.value ) {
  	case "1":
    	criaSelect( rs );
      break;
    case "2":
      criaSelect( sc );
      break;
    case "3":
      criaSelect( pr );
      break;
    case "4":
      criaSelect( mg );
      break;
	}
});

function criaSelect( secao ) {

	let selectSecaoEscolhida = document.querySelector( '#secaoEscolhida' );
  let criaElementoOption = document.createElement( 'option' );
  let insereSelect = selectSecaoEscolhida.appendChild( criaElementoOption );

	if( secao == rs ) {
		secao = rs;
    secao.forEach( ( elemento ) => {
    	criaElementoOption.textContent = elemento;
    });
  }
  else if( secao == sc ) {
		secao = sc;
    secao.forEach( ( elemento ) => {
    	criaElementoOption.textContent = elemento;
    });
  }
  else if( secao == pr ) {
		secao = pr;
    secao.forEach( ( elemento ) => {
    	criaElementoOption.textContent = elemento;
    });
  }
  else if( secao == mg ) {
		secao = mg;
    secao.forEach( ( elemento ) => {
    	criaElementoOption.textContent = elemento;
    });
  }
}