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"> </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>
var valorSelecionado = $( "option:selected" , this ) . val();
.. bastavar valorSelecionado = $(this).val();