Exibir selectbox de acordo com a opção anterior
Estou criando um form com alguns selects, onde a escolha
de cada select condiciona a exibição de outro com options especificas.
Criei um jquery para fazer isso, contudo não sei se estou fazendo da
melhor maneira. Atualmente meu html é mais ou menos isso:
<select id="secao">
<option value="1">Opcao Um</option>
<option value="2">Opcao Dois</option>
</select>
<select id="opcao1">
<option value="1">Opções da Seção 1</option>
<option value="2">Opções 2 da Seção 1</option>
</select>
<select id="opcao2">
<option value="1">Opção da Seção 2</option>
<option value="2">Opção 2 da Seção 2</option>
</select>
Agora o jQuery:
jQuery(function($){
$('#opcao1').addClass('hide'); //Hide adiciona um display none no style
$('#opcao2').addClass('hide');
var secao = $('#secao');
secao.on('change', function(){
if(secao.val()=='1'){
$('#opcao1').addClass('show'); // Show adiciona um display block no style
}else if(secao.val()=='2'){
$('#opcao2').addClass('show');
}
});
});
O problema é que quando eu escolho a opção 1 na select das seções ele até funciona, so que quando eu escolho a opção 2 a opção um não some, dentro do if e do else if eu coloquei para ele ocultar a select ao selecionar a opção oposta, só que acho uma solução muito peba, gostaria de saber como fazer para ao selecionar a opção um, depois a dois, a opção um suma, onde eu estou errando? onde pode melhorar? Desde já obrigado.Discussão (4)
Carregando comentários...