Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcelo Garbin

[Resolvido] Select + Jquery = Hide/Show

Por , em Javascript

Recommended Posts

Marcelo Garbin    30

Marcelo Garbin
Postado

Bom dia galera iMasters,

 

Seguinte estou querendo fazer um Select com Jquery, exemplo: Quando eu selecionar determinada opção no Select um campo fica oculto ou o mesmo aparece.

 

Eu até fiz um esboço de código, funciona no Firefox, IE 9, Chorme... Porém o mesmo tem que estar atualizados, digo na ultima versão. Gostaria de ver esse código funcionando em outra versões do IE(7 / 8).

 

Alguém tem alguma idéia do que modificar ou algum outro código que funcione nessas outras versões do browser ???

 

Obrigado.

 

Segue o meu código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select + Jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="application/javascript"></script>
<script type="application/javascript">
$(document).ready(function() {
$('#opcional').css('display','none');
$('#tipo_doc').change(function() {
	$('#opcional').hide('slow');
	$('#dt_criacao').show('slow');
	if ($('#tipo_doc').val() == "2"){
		$('#opcional').show('slow');
		$('#dt_criacao').hide('slow');
	}
	else{      
		$('#opcional').hide('slow');
		$('#dt_criacao').show('slow');
	}
});
$('#tipo_doc').change();
});
</script>
</head>
<body>
<h3>Select + Jquery</h3>
<hr />
<form id="form" name="form" action="#" method="post" enctype="multipart/form-data">
         <fieldset>
          <label for="tipo_doc">
          <span>Tipo de Doc. <strong style="color:#F00;">*</strong></span> 
           <select id="tipo_doc" name="tipo_doc">
             <option value="">Selecionar</option>
             <option value="1">1</option>   
             <option value="2">2</option>   
             <option value="3">3</option>  
           </select> 
          </label>              
          <label for="codigo" style="width:103px;">
             <span>Código <strong style="color:#F00;">*</strong></span>
             <input name="codigo" type="text" style="width:103px;" maxlength="20">
          </label> 
          <label id="dt_criacao" for="dt_criacao" style="width:103px;">
             <span>Data Criação <strong style="color:#F00;">*</strong></span>
             <input name="dt_criacao" type="text" style="width:103px;">
          </label> 
          <label for="dt_revisao" style="width:103px;">
             <span>Data Revisão</span>
             <input name="dt_revisao" type="text" style="width:103px;">
          </label> 
          </fieldset>
          <fieldset>
          <label for="nome" style="width:883px;">
             <span>Nome do Documento <strong style="color:#F00;">*</strong></span>
             <input name="nome" type="text" style="width:883px;" maxlength="255">
          </label>
         </fieldset> 
         <fieldset id="opcional">
          <label for="origem" style="width:882px;">
             <span>Origem do Documento <strong style="color:#F00;">*</strong></span>
             <input name="origem" type="text" style="width:883px;" maxlength="255">
          </label>
         </fieldset> 
	  <fieldset>          	  
             <input name="submit" value="OK" type="submit" />              
         </fieldset>                           
</form>   
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

exemplo bem simples e funcional:

 

http://wbruno.com.br/2010/07/28/ocultarmostrar-elementos-apartir-de-radio-select/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

 

Buenas William Bruno.... muito bom... isso mesmo. nesse caso no código que postei anteriormente em jquery ficari assim?? tentei por aqui mas não rolou, que está errado?

 

<script type="application/javascript">
$(document).ready(function(){  
       $("#opcional").hide();  
       $("#tipo_doc").change(function(){  
               $("#opcional").hide();  
               $( '#'+$( this ).val() ).show('fast');  
       });   
}); 
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

Até consegui fazer agora.. mas se eu deixo ele dentro do formulário e coloco em modo de compatibilidade que seria o IE 7... o fieldset #opcional simplesmente fica aparecendo e não funciona o código em Jquery,(não fica oculto o fieldset)...

Tem que ser somente com div ? ou qualquer elemente que eu por a ali com id fazendo ref. vai funcionar ? obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você precisa alterar os values do teu select.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

você precisa alterar os values do teu select.

 

Bahh William, deixa eu te falar... fiz igualzinho o que você fez... porém com o código que eu usei...

 

Foi bobeira minha... tava colocando o tipo do script como (type="application/javascript") e o correto para manter a funcionalidade nos outros browser's mais antigos é (type="text/javascript").

 

Que mancada hehe... mas muito obrigado pela sua ajuda..

 

Tópico resolvido, ADM pode fechar.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito