Exibir selectbox de acordo com a opção anterior

[Angelo Rocha 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.

[William Bruno 1501]

jQuery(document).ready(function(){

var $opcoes = $('#opcao1, #opcao2');

$opcoes.addClass('hide');

 

var $secao = $('#secao');

$secao.on('change', function(){

var $this = $(this);

 

$opcoes.removeClass('show').addClass('hide');

$('#opcao' + $this.val()).removeClass('hide').addClass('show');

});

});

[Angelo Rocha 0]

William, dessa forma ao selecionar uma das opções da select seções as duas outras estão aparecendo ao mesmo tempo, independente de qual opção da select seções eu escolha.

[William Bruno 1501]

Ah, desculpa.. eu errei ali, era:

 $opcoes.removeClass('show').addClass('hide');

teste agora.

[Angelo Rocha 0]

Agora ficou bacanudo, era exatamente assim que eu queria que ficasse, obrigado William, demorei a entender só o:

$('#opcao' + $this.val()).removeClass('hide').addClass('show');

Como meu código real é diferente do que postei como exemplo a ficha demorou a cair, vc pega o elemento com ID opção e adiciona mais um prefixo na ID baseado no valor da opção da select seção.

 

Show man, vlw mais uma vez.