Exibir/ocultar div através de um select - não funciona

[mm_edilson]

Amigos, tenho duas divs que precisam iniciar escondidas na página e depois exibir, a primeira ou a segunda, conforme eu clicar em um select. 

Ou seja, quando carrego a página, ambas as divs estão display: none. Quando clico na primeira opção em um select, a div1 é exibida. Quando clico na segunda opção no select, a primeira div1 esconde e exibe a div2. 

Mas não funciona. A página carrega com as divs ocultas, mas não exibe nenhuma delas quando clico em algum item no select. 

Fiz assim:

<table>
                <tr>
                    <td>
                        <div id="tipo"><p>Tipo de pesquisa:</p>
                        <select name="tipo">
                            <option value="-1" selected>Todos os registros</option>
                            <option value="op1">Opção 1</option>
                            <option value="op2">Apenas não membros</option>
                        </select>
                        </div>
                    </td>
                    <td>
                        <div id="op1" class="hidden"><p>Opção 1:</p>
                        <select name="opcao1">
                            <option value="sit_a" selected>Situação A</option>
                            <option value="sit_b">Situação B</option>
                            <option value="sit_c">Situação C</option>
                       </select>
                        </div>
                    <td>
                        <div id="op2" class="hidden"><p>Opção 2:</p>
                        <select name="opcao2">
                            <option value="sit_d" selected>Situação D</option>
                            <option value="sit_e">Situação E</option>
                        </select>
                        </div>
                    </td>
                </tr>
            </table>

 

No CSS coloquei:

.hidden{
    display:none;
}
.show{
    display:block;
}

 

E no JavaScript, fiz assim:

<script type="text/javascript">
var dropdown = document.getElementById("tipo");
optionPrev = "null"
function onCatChange() {
  if ( dropdown.options[dropdown.selectedIndex].value != -1 ) {
    var option = dropdown.options[dropdown.selectedIndex].value;
    if( optionPrev != "null") {
      var optionHide = document.getElementById(optionPrev);
      optionHide.classList.toggle("show");
    } 
    var optionShow = document.getElementById(option);
    optionShow.classList.toggle("raiseSunshine");
    optionPrev = option;
  }
}
dropdown.onchange = onCatChange;
</script>