Popular segundo select de acordo com a opção escolhida no primeiro select

Oi Jorge, tudo bom?

Acredito que hajam alguns pontos pra comentar no código. Ao final vou deixar ele todo corrigido aqui =)

O primeiro, é que ao selecionar uma option no select secao não estamos limpando as options no select secaoEscolhida. O que acaba acumulando as options quando trocamos a selecionada em secao. O segundo é que estamos redefinindo o array secao:

else if( secao == pr ) {
        secao = pr;
// estamos transformando sessão em pr se pr for igual sessão. Sendo que se pr é igual sessão não precisamos da atribuição =)

Terceiro e final, estamos criando um input só e alterando o texto dele no nosso foreach:

// aqui criamos o input
let selectSecaoEscolhida = document.querySelector( '#secaoEscolhida' );
  let criaElementoOption = document.createElement( 'option' );
  let insereSelect = selectSecaoEscolhida.appendChild( criaElementoOption );

    if( secao == rs ) {
        secao = rs;
    secao.forEach( ( elemento ) => {
// aqui mudamos o nome dele para cada elemento dentro da secao!
        criaElementoOption.textContent = elemento;
    });
  }

Isso faz com que ele varra o array secao e apenas altere o nome do input. Por isso a gente vê um input só sendo criado =)

Para isso, precisariamos criar realmente um input para cada iteração do foreach. Segue código:

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 limpaSelect(selectbox)
{
    var i;
    for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
    {
        selectbox.remove(i);
    }
}
function criaOption(elemento){
            let selectSecaoEscolhida = document.querySelector( '#secaoEscolhida' );
            let criaElementoOption = document.createElement( 'option' );
      let insereSelect = selectSecaoEscolhida.appendChild( criaElementoOption );
        criaElementoOption.textContent = elemento;
}
function criaSelect( secao ) {
  limpaSelect(document.querySelector( '#secaoEscolhida' ));

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

Qualquer duvida é só falar.

Abraço e bons estudos!

E aí André, tudo bem

Muito obrigado pela ajuda. Para complementar, adicionei uma função que compara as seções, assim não preciso repetir aquele monte de if's. Fica até mais fácil se quiser comparar várias seções.

Se tiver uma forma melhor acrescenta aí por gentileza. No mais obrigado mais uma vez. Segue abaixo meu código final:

<label>Seção:</label><br>
<select name="secao" id="secao">
    <option value="0">Selecione a seção</option>
    <option value="1">Seção 1</option>
    <option value="2">Seção 2</option>
    <option value="3">Seção 3</option>
    <option value="4">Seção 4</option>
</select><br><br>
<label>Categoria:</label><br>
<select name="secaoEscolhida" id="secaoEscolhida"></select>

let secao = document.querySelector( '#secao' );
let secao1 = [ "Seção 1 - Categoria 1", "Seção 1 - Categoria 2" ];
let secao2 = [ "Seção 2 - Categoria 1", "Seção 2 - Categoria 2" ];
let secao3 = [ "Seção 3 - Categoria 1", "Seção 3 - Categoria 2" ];
let secao4 = [ "Seção 4 - Categoria 1", "Seção 4 - Categoria 2" ];

secao.addEventListener( 'change', () => {
    switch( secao.value ) {
        case "1":
            criaSelect( secao1 );
            break;
        case "2":
            criaSelect( secao2 );
            break;
        case "3":
            criaSelect( secao3 );
            break;
        case "4":
            criaSelect( secao4 );
            break;
    }
});

function limpaSelect( selectbox ) {
    var i;
    for( i = selectbox.options.length - 1; i >= 0; i-- ) {
        selectbox.remove( i );
    }
}

function criaOption( elemento ) {
    let selectSecaoEscolhida = document.querySelector( '#secaoEscolhida' );
    let criaElementoOption = document.createElement( 'option' );
    let insereSelect = selectSecaoEscolhida.appendChild( criaElementoOption );
    criaElementoOption.textContent = elemento;
}

function comparaSecoes( primeiraSecao, segundaSecao ) {
    if( primeiraSecao == segundaSecao ){
        primeiraSecao.forEach(( elemento ) => {
            criaOption( elemento );
        });
    }
}

function criaSelect( secao ) {
    limpaSelect( document.querySelector( '#secaoEscolhida' ));            

    comparaSecoes( secao, secao1 );
    comparaSecoes( secao, secao2 );
    comparaSecoes( secao, secao3 );
    comparaSecoes( secao, secao4 );
}