[Resolvido] Ajuda com onchange

[everton_araujo 1]

Olá pessoal, bom dia.

Gostaria de pedir a ajuda de vcs na criação desse filtro que estou fazendo com a tag option.

Basicamente gostaria que ao ser mudada a seleção com o value correspondente, a classe pudesse ter o atributo css display:block; e as demais display:none;

 

 

 <select id="mySelect" onchange="myFunction()">
    <option value="todas" >Todas</option>
    <option value="advogadas">Advogadas</option>
    <option value="consultora">Consultora de apoio a adolescentes e universidades internacionais</option>
    <option value="coordenadora">Coordenadoras da Educação</option>
    <option value="coach">Coachs</option>
     <option value="psicologas">Psicólogas</option>
      <option value="gestora">Gestora de comunicação</option>
       <option value="veterinaria">Veterinária</option> <option value="recursos">PHD em Recursos Humanos</option>
  </select>

 

<div class="todas">conteúdo aqui</div>

<div class="advogadas">conteúdo aqui</div>

<div class="consultora">conteúdo aqui</div>

<div class="coordenadora">conteúdo aqui</div>

....Assim por diante...

 

Desde já, agradeço.

[Omar~ 87]

<select id="mySelect">
    <option value="todas">Todas</option>
    <option value="advogadas">Advogadas</option>
    <option value="consultora">Consultora de apoio a adolescentes e universidades internacionais</option>
    <option value="coordenadora">Coordenadoras da Educação</option>
</select>

<div class="alvo todas">conteúdo aqui "todas"</div>
<div class="alvo advogadas">conteúdo aqui "advogadas"</div>
<div class="alvo consultora">conteúdo aqui "consultora"</div>
<div class="alvo coordenadora">conteúdo aqui "coordenadora"</div>

<script>
    var mySelect = document.getElementById('mySelect'),
    valorAtual = mySelect.value;

    mySelect.addEventListener('change', myFunction, false);

    function myFunction(e) {
        var seletor = e.target, elementos, i;

        if (seletor.value != window.valorAtual) { // Só funciona se modificar o valor do seletor
            window.valorAtual = seletor.value;

            elementos = document.getElementsByClassName('alvo');
            for (i = 0; i < elementos.length; i++) {
                elementos[i].style.display = 'none';
            }
            document.querySelector('.' + seletor.value).style.display = 'block';
        }
    }
</script>

 

[everton_araujo 1]

Obrigado, funcionou perfeitamente.