0

Estou usando CHANGE() para capturar uma STRING ID (VALUE em um FORM) e usando esse ID para esconder ou mostrar a DIV selecionada. Na primeira passada na caixinha de seleção (SELECT OPTION) ocorre o esperado, porém quando volto e seleciono outro item, o anterior não desaparece. O que estou fazendo errado? Alguém poderia me explicar?

O SCRIPT jQuery, o CSS (com os IDs) e o trecho correspondente do HTML estão assim:

// jQuery
$( document ) . ready( function() {

  $( "#area" ) . change( function() {

    var valorSelecionado = $( "option:selected" , this ) . val(); 
      console.log( valorSelecionado ); // Debug

    var IDselecionado = $( "#" + valorSelecionado ); 
      console.log( IDselecionado ); // Debug

    $( IDselecionado ) . show( "slow" );
  });
});
#software, 
#redes, 
#hardware, 
#design { 
	display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FORM -->
<form>
  <select id="area">
    <option value=" " selected="selected">&nbsp;</option>
    <option value="software">Software</option>
    <option value="redes">Redes</option>
    <option value="hardware">Hardware</option>
    <option value="design">Design e Programação Visual</option>
  </select>
</form>
<!-- DIV (procedimentos) -->
<div id="procedimentos">
  <!-- 
    1. Software 
  -->
  <div id="software">
    <h2>Software</h2>
    <h5>
      Técnicos responsáveis: <br />
      <em>
      <strong>
      <a href="#">
      Renato e Ricardo
      </a>
      </strong>
      </em>
    </h5>
    <ol>
      <li>Procedimento de software um. </li>
      <li>Procedimento de software dois. </li>
      <li>Procedimento de software três. </li>
    </ol>
  </div>
  <!-- 
    2. Redes 
  -->
  <div id="redes">
    <h2>Redes</h2>
    <h5>
      Técnico responsável: <br />
      <em>
      <strong>
      <a href="#">
      Renato 
      </a>
      </strong>
      </em>
    </h5>
    <ol>
      <li>Procedimento de redes um. </li>
      <li>Procedimento de redes dois. </li>
      <li>Procedimento de redes três. </li>
    </ol>
  </div>
  <!-- 
    3. Hardware 
  -->
  <div id="hardware">
    <h2>Hardware</h2>
    <h5>
      Técnico responsável: <br />
      <em>
      <strong>
      <a href="#">
      Ricardo 
      </a>
      </strong>
      </em>
    </h5>
    <ol>
      <li>Procedimento de hardware um. </li>
      <li>Procedimento de hardware dois. </li>
      <li>Procedimento de hardware três. </li>
    </ol>
  </div>
  <!-- 
    4. Design 
  -->
  <div id="design">
    <h2>Design e Programação Visual</h2>
    <h5>
      Técnico responsável: <br />
      <em>
      <strong>
      <a href="#">
      Alexandre 
      </a>
      </strong>
      </em>
    </h5>
    <ol>
      <li>Procedimento de design um. </li>
      <li>Procedimento de design dois. </li>
      <li>Procedimento de design três. </li>
    </ol>
  </div>
</div>

1
  • Não precisa de var valorSelecionado = $( "option:selected" , this ) . val(); .. basta var valorSelecionado = $(this).val();
    – Meu ovo
    20/04/2018 às 1:16

1 Resposta 1

2

Você deve ocultar a div dentro da div procedimentos.

$('#procedimentos > div').hide();

Veja funcionando em jsbin.com

1
  • Muito obrigado! Funciona perfeitamente! Pensei que como já havia atribuído, por intermédio da folha de estilos (DISPLAY NONE) a ocultação das DIVs que não seria necessário utilizar o hide(). Valeu mesmo! Abraço! 19/04/2018 às 22:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .