Como mostrar um DIV apartir de uma opção no select

[Jrbrasil 0]

Por exemplo, ao ser selecionada uma opção sim ou não na caixa de seleção <select></select> , já abrir se sim uma camada com alguns elementos a mais do formulário...

 

não sei como executar... sem ter que usar o botão...

Grato...

Robson

[Jrbrasil 0]

Cara muito obrigado pela força...Era isso mesmo.. O onChange era a chave do problema...VALEU...

[Régis Nogueira 0]

Tem vários exemplos disso no fórum! Veja:

<script language="JavaScript" type="text/javascript">function ShowHideDIV(NomeDIV, Valor){Valor = document.getElementById("Lista").value;if (Valor=="Sim") {document.getElementById(NomeDIV).style.display = "block";} else {document.getElementById(NomeDIV).style.display = "none";}}</script>

Uso:

<form name="Teste">Tipo: <select name="Lista" size="1" id="Lista" onChange="ShowHideDIV('CampoOculto','Sim');"><option value=""></option><option value="Sim">Um</option><option value="Nao">Dois</option></select><br><br><div id="CampoOculto" style="display: none;"><input type="text" name="Caixa" id="Caixa"><br></div></form>

B)

Cara me dia uma coisa. Seu eu tivesse uma combo com as opções:- 2003- 2004- 2005- 2006E ao usuário escolher uma destas opções aparecer um conteúdo específico mas ao invés de ser em um form ser uma tabela. Ou seja ele escolheu a opção 2005, por exemplo, aparece o conteúdo de uma tebela referente a este ano, e assim sucessivamente.Abraços

[Régis Nogueira 0]

Cara me dia uma coisa. Seu eu tivesse uma combo com as opções: 2003, 2004, 2005 e 2006. E ao usuário escolher uma destas opções aparecer um conteúdo específico mas ao invés de ser em um form ser uma tabela. Ou seja ele escolheu a opção 2005, por exemplo, aparece o conteúdo de uma tebela referente a este ano, e assim sucessivamente.

Da mesma forma! Crie as DIVs com os IDs 2003, 2004, 2005 e 2006 ou ponha esses IDs diretamente nas tabelas (<table id="2003" ... ... style="display: none;">) e passe o valor pelo ONCHANGE do select! Esses valores (2003, 2004, 2005 e 2006) deverão ser os valores dos options do select!

 

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

 

MAs como faço para ele ecolher a opção correta conforme a seleção.

 

Nesta parte do código você identifica o ID como CampoOculto. Mas se eu tenho ais de uma ID. Como faço ?

 

<select name="Lista" size="1" id="Lista" onChange="ShowHideDIV('CampoOculto','Sim');">

[MAPSantos 0]

OI Adriano e restante comunidade,

 

Tou tentando implementar este exemplo que você deu, mas não me está funcionando correctamente, apenas mostra o primeiro valor!!

 

Alguem pode ajudar!

 

Aqui fica o codigo

 

<script language="JavaScript" type="text/javascript">function ShowHideDIV(Valor){Valor = document.getElementById("Lista").value;switch (Valor){	case "num_cl":		document.getElementById(Valor).style.display = "block";		document.getElementById("sft").style.display = "none";		document.getElementById("num_act").style.display = "none";		document.getElementById("num_enc").style.display = "none";		document.getElementById("estado_siebel").style.display = "none";		document.getElementById("estado_sigma").style.display = "none";		document.getElementById("estado_cliente").style.display = "none";	break;	case "sft":		document.getElementById("num_cl").style.display = "block";		document.getElementById(Valor).style.display = "none";		document.getElementById("num_act").style.display = "none";		document.getElementById("num_enc").style.display = "none";		document.getElementById("estado_siebel").style.display = "none";		document.getElementById("estado_sigma").style.display = "none";		document.getElementById("estado_cliente").style.display = "none";	break;	case "num_act":		document.getElementById("num_cl").style.display = "block";		document.getElementById("sft").style.display = "none";		document.getElementById(Valor).style.display = "none";		document.getElementById("num_enc").style.display = "none";		document.getElementById("estado_siebel").style.display = "none";		document.getElementById("estado_sigma").style.display = "none";		document.getElementById("estado_cliente").style.display = "none";	break;	case "num_enc":		document.getElementById("num_cl").style.display = "block";		document.getElementById("sft").style.display = "none";		document.getElementById("num_act").style.display = "none";		document.getElementById(Valor).style.display = "none";		document.getElementById("estado_siebel").style.display = "none";		document.getElementById("estado_sigma").style.display = "none";		document.getElementById("estado_cliente").style.display = "none";	break;	case "estado_siebel":		document.getElementById("num_cl").style.display = "block";		document.getElementById("sft").style.display = "none";		document.getElementById("num_act").style.display = "none";		document.getElementById("num_enc").style.display = "none";		document.getElementById(Valor).style.display = "none";		document.getElementById("estado_sigma").style.display = "none";		document.getElementById("estado_cliente").style.display = "none";	break;	case "estado_sigma":		document.getElementById("num_cl").style.display = "block";		document.getElementById("sft").style.display = "none";		document.getElementById("num_act").style.display = "none";		document.getElementById("num_enc").style.display = "none";		document.getElementById("estado_siebel").style.display = "none";		document.getElementById(Valor).style.display = "none";		document.getElementById("estado_cliente").style.display = "none";	break;	case "estado_cliente":		document.getElementById("num_cl").style.display = "block";		document.getElementById("sft").style.display = "none";		document.getElementById("num_act").style.display = "none";		document.getElementById("num_enc").style.display = "none";		document.getElementById("estado_siebel").style.display = "none";		document.getElementById("estado_sigma").style.display = "none";		document.getElementById(Valor).style.display = "none";	break;}}</script>			<table width="97%" border="0" align="center">			  <tr>				<td width="18%">				  <form name="Teste">				  <select name="Lista" size="1" id="Lista" onChange="ShowHideDIV(this.value);">				  <option selected>Pesquisa por:</option>				  <option value="num_cl">Nº Cliente</option>				  <option value="sft">SFT</option>				  <option value="num_act">Nº Actividade</option>				  <option value="num_enc">Nº Encomenda</option>				  <option value="estado_siebel">Estado Siebel</option>				  <option value="estado_sigma">Estado Sigma</option>				  <option value="estado_cliente">Estado Cliente</option>				  </select>				  </form>				 </td>				<td width="82%"><table width="97%" border="0" align="left">				  <tr>					<td><table id="num_cl" style="display: none;" width="20%" border="0">						<tr>						  <td><form name="form1" method="post" action="cladslsearch.asp?mode=num_cl">							  <input name="input_cl" type="text" id="input_cl" size="11" maxlength="10">							  <br>							  <input type="submit" name="Submit5" value="Procurar">						  </form></td>						</tr>					  </table>						<table id="sft" style="display: none;" width="20%" border="0">						  <tr>							<td><form name="form1" method="post" action="cladslsearch.asp?mode=sft">								<input name="input_sft" type="text" id="input_sft" size="11" maxlength="9">								<br>								<input type="submit" name="Submit2" value="Procurar">							</form></td>						  </tr>						</table>					  <table id="num_act" style="display: none;" width="20%" border="0">						  <tr>							<td><form name="form1" method="post" action="cladslsearch.asp?mode=num_act">								<input name="input_act" type="text" id="input_act" size="11" maxlength="11">								<br>								<input type="submit" name="Submit3" value="Procurar">							</form></td>						  </tr>						</table>					  <table id="num_enc" style="display: none;" width="20%" border="0">						  <tr>							<td><form name="form1" method="post" action="cladslsearch.asp?mode=num_enc">								<input name="input_enc" type="text" id="input_enc" size="11" maxlength="11">								<br>								<input type="submit" name="Submit4" value="Procurar">							</form></td>						  </tr>						</table>					  <table id="estado_siebel" style="display: none;" width="20%" border="0">						  <tr>							<td><form name="form1" method="post" action="cladslsearch.asp?mode=estado_siebel">								<select name="input_siebel" id="input_siebel">								  <option selected>Faça a sua escolha</option>								  <option value="OK">OK</option>								  <option value="Pendente - Entrega SNSI">Pend. - Entrega SNSI</option>								  <option value="Pendente - Cliente">Pend. - Cliente</option>								  <option value="Pendente - TvCabo Encomenda - SAP">Pend. - TvCabo Encomenda - SAP</option>								  <option value="Pendente - TvCabo Encomenda - Outros">Pend. -  TvCabo Encomenda - Outros</option>								</select>								<br>								<input type="submit" name="Submit6" value="Procurar">							</form></td>						  </tr>						</table>					  <table id="estado_sigma" style="display: none;" width="20%" border="0">						  <tr>							<td><form name="form1" method="post" action="cladslsearch.asp?mode=estado_sigma">								<select name="input_sigma" size="1" id="input_sigma">								  <option selected>Faça a sua escolha</option>								  <option value="OK">OK</option>								  <option value="Pendente Username">Pendente Username</option>								  <option value="Erros Funcionais">Erros Funcionais</option>								  <option value="Resp. Cliente">Resp. Cliente</option>								  <option value="Rede PT">Rede PT</option>								</select>								<br>								<input type="submit" name="Submit7" value="Procurar">							</form></td>						  </tr>						</table>					  <table id="estado_cliente" style="display: none;" width="20%" border="0">						  <tr>							<td><form name="form1" method="post" action="cladslsearch.asp?mode=estado_cliente">								<select name="input_estadocliente" size="1" id="input_estadocliente">								  <option selected>Faça a sua escolha</option>								  <option value="Pendente - Resp. Tvcabo">Pendente - Resp. Tvcabo</option>								  <option value="OK">OK</option>								  <option value="OK Cl - Não OK em Sistema">OK Cl - Não OK em Sistema</option>								  <option value="OK Sistema - Não OK Cl">OK Sistema - Não OK Cl</option>								  <option value="Não OK - Cl Desistiu">Não OK - Cl Desistiu</option>								  <option value="Não OK - Resp. Cl (dividas PT)">Não OK - Resp. Cl (dividas PT)</option>								  <option value="Não OK - Resp. Cl (linha outro ISP)">Não OK - Resp. Cl (linha outro ISP)</option>								  <option value="Não OK - Resp. Cl (linha incompativel)">Não OK - Resp. Cl (linha incompativel)</option>								  <option value="Não OK - Resp. Tvcabo (Rdis)">Não OK - Resp. Tvcabo (Rdis)</option>								  <option value="Não OK - Resp. Tvcabo (Rede)">Não OK - Resp. Tvcabo (Rede)</option>								</select>								<br>								<input type="submit" name="Submit" value="Procurar">							</form></td>						  </tr>					  </table></td>				  </tr>				</table></td>			  </tr>			</table>

bah, esquecam .... tava a bloquear sempre o primeiro :S

[MAPSantos 0]

bah, esquecam .... tava a bloquear sempre o primeiro :S