[Resolvido] Mostrar e esconder <select> de acordo com o e

[Will Martins 0]

Galera, é o seguinte:

 

Tenho que criar um <select> que, de acordo com a escolha do usuário, eu consiga visualizar uma informação diferente.

 

Eu consegui fazer isso apenas escolhendo qualquer option sempre aparece a mesma coisa.

 

Abaixo no código, eu gostaria de que quando a pessoa clica no "Sim", mostra o restante do formulário escondido e quando clica em "às vezes", ele não mostra nada.

 

Dê uma olhada no meu código:

 

<!-- Função hideandshow / Function hideandshow  -->
<script type="text/javascript">
	function hideandshow(id){ 
		if(document.getElementById(id).style.display == 'inline'){ 
			document.getElementById(id).style.display = 'none';
		}else{
			document.getElementById(id).style.display = 'inline';
		}
	}

	function executaEventoOnclick(id){ 
		if(document.getElementById(id).style.display == 'inline'){ 
			document.getElementById(id).style.display = 'none';
		}else{
			document.getElementById(id).style.display = 'inline';
		}{ 
			document.getElementById(id).style.display = 'inline';
		}
	} 
</script> 

<STYLE type="text/css">
#smasaro{
	display: none;
}
</style>

	<label for="aromatic"><b>Massagem Aromática</b></label>	
		<select class="inputbox" id="aromatic" size="1" title="Massagem Aromática"  name="aromatic" onchange="executaEventoOnclick('smasaro')">
				<option value="Não">Não</option>
				<option value="Sim" >Sim</option>
				<option value="Às vezes">Às vezes</option>
		</select>
		
<!-- DIV fica escondida até algum clique no SELECT -->		
<div id="smasaro">
	<a href="#" onclick="return hideandshow('smasaro');">Esconder opções</a><br />
		<label for="frearoma">Frequência aromasagem</label>
			<select class="inputbox" id="frearoma" size="1" name="frearoma">
				<option value="Nunca">Nunca</option>
				<option value="Diário">Diário</option>
				<option value="Semanal">Semanal</option>
				<option value="Quinzenal">Quinzenal</option>
				<option value="Mensal">Mensal</option>
				<option value="Bimestral">Bimestral</option>
				<option value="Trimestral">Trimestral</option>
				<option value="Quadrimestral">Quadrimestral</option>
				<option value="Raramente">Raramente</option>
				<option value="Anual">Anual</option>
			</select> <br />
	    <label for="locaroma">Local </label>
		<input name="locaroma" type="text" id="locaroma" size="50" /> <br />
		<label for="nomaroma">Nome Local </label>
		<input name="nomaroma" type="text" id="nomaroma" size="50" /> <br />
	    <label for="obsaroma">Observações</label>
		<textarea name="obsaroma" id="obsaroma" cols="45" rows="5"></textarea> <br />
</div>

[Thiago Retondar 18]

Faça assim:

 

<select class="inputbox" id="aromatic" size="1" title="Massagem Aromática"  name="aromatic" onchange="executaEventoonclick('smasaro')">
    <option value="Não">Não</option>
    <option value="Sim" >Sim</option>
    <option value="Às vezes">Às vezes</option>
</select>

Mude para:

 

<select class="inputbox" id="aromatic" size="1" title="Massagem Aromática"  name="aromatic" onchange="executaEventoonclick('smasaro')">
    <option value="0">Não</option>
    <option value="1" >Sim</option>
    <option value="2">Às vezes</option>
</select>

E faça um JavaScript mais ou menos assim:

 

window.onload = function(){
    var select = document.getElementById('aromatic');
    select.onchange = function(){
        if(this.value == 1)
            document.getElementById('smasaro').style.display = "block";
        else if(this.value == 0 || this.value == 3)
            document.getElementById('smasaro').style.display = "none";
    };
};

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Will Martins 0]

Cara... você salvou o meu final de semana, a minha semana, já tem 1 semana que estou tentando fazer isso e não consigo. Obrigado!

 

Deu certinho, do jeito que eu queria, valeu mesmo!

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Thiago Retondar 18]

Que bom que salvei seu final de semana... :P

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif