Campo select (dropdown) para exibir e esconder divs de forma dinâmica em JS puro

Snippet pronto para vocë usar livremente em qualquer projeto. Dois campos de select dropdown que exibem e escondem divs de forma dinâmica por ID’s e Classes. Lógica pensada em processo único e simples para escalonar.

Pensamento lógico

Cada value dos options é deve ser utilizada como a ID da Div a ser encondida / exibida. Simples assim. A estrutura do HTML não precisa estar ordenada, as Divs podem ser inseridas em qualquer posição do layout no código.

Seleciona a opção no dropdown > JS esconde as Divs não selecionadas > JS exibe a Div selecionada.

Estrutura HTML exemplo

<select id="droplist">
  <option value="-1">Selecione para exibir...</option>
  <option value="item-1">Conteúdo Um</option>
  <option value="item-2">Conteúdo Dois</option>
  <option value="item-3">Conteúdo Três</option>
</select>

<div id="item-1" class="hidden">
  <p>Conteudo Um</p>
</div>

<div id="item-2" class="hidden">
  <p>Conteudo Dois</p>
</div>

<div id="item-3" class="hidden">
  <p>Conteudo Três</p>
</div>

CSS

.hidden {
  display: none;
}
	
.show{
  display: block; /* Utilize !important caso ocorra conflito */
}

JavaScript – Deve ser colocado no final da página antes de fechar o </body>

<script type="text/javascript"><!--
var dropdown = document.getElementById("droplist"); // seleciona o elemento select
optionPrev = "null" // seta valor vazio para primeira seleção
function onCatChange() {
  if ( dropdown.options[dropdown.selectedIndex].value != -1 ) { // validação para option vazia
    var option = dropdown.options[dropdown.selectedIndex].value; // pega value do option selecionado
    if( optionPrev != "null") { // validação para primeira seleção vazia
      var optionHide = document.getElementById(optionPrev); // seleciona Div em exibição
      optionHide.classList.toggle("show"); // esconde Div em exibição, alternando a class
    } 
    var optionShow = document.getElementById(option); // seleciona Div recem selecionada
    optionShow.classList.toggle("raiseSunshine"); // exibe Div selecionada, alternando a class
    optionPrev = option; // seta valor da Div selecionada para pode ser encondida quando necessário
  }
}
dropdown.onchange = onCatChange; // escuta as mudanças do campo select
--></script>