Quantcast
Channel: Últimos conteúdos
Viewing all articles
Browse latest Browse all 14190

Exibir selectbox de acordo com a opção anterior

$
0
0

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.


Viewing all articles
Browse latest Browse all 14190