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.