Ir para conteúdo

POWERED BY:

Arquivado

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

marcelo_sampaio

[Resolvido] abrir div com uma <option> selecionada de uma

Por , em Javascript

Recommended Posts

marcelo_sampaio    0

marcelo_sampaio
Postado

Olá pessoal,

 

gostaria que um luz... quero fazer um formulario com campos ocultos.. sem que quando eu clico em uma <option> devera aparecer abaixo o campo escondido

no caso uma <div> com outro formulario.

o codigo abaixo até funciona mas no firefox no IE não funciona.. algueém poderia me ajudar desde já agradeço a todos vcs!!

 

 

 

 

 

<!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>Untitled Document</title>
<script  type="text/javascript" src="jquery.js"></script>

<script  type="text/javascript">

	$(document).ready(function(){
		$("#abrir").hide();

		$('.abrirDiv').click(function(){
			$("#abrir").slideDown('slow');
		})	

		$(".esconderDiv").click(function(){
			$("#abrir").slideUp('slow');	
		})


	})

</script>

<style type="text/css">
h1{ margin:0; padding:0 }
#geral { width:600px; margin: 0 auto; padding:10px; border: 1px solid #CCC; }
#selectx { background:#CCC; width:auto;}
#abrir { background:#09C; color:#FFF }

</style>

</head>

<body>

<div id="geral">

       <div id="selectx">
           <form>
               <select name="">
                   <option value="" class="esconderDiv">Escolha...</option>
                   <option value="" class="abrirDiv">será que abre uma div</option>
               </select>
           </form>

      </div>

      <div id="abrir">
           <h1>Div aberta!</h1>
      </div>




</div>


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não dispare no option, mas sim no onchange do select.

 

exemplo:

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo_sampaio    0

marcelo_sampaio
Postado

Opa obrigado pela dica.. mas como eu to iniciando em javascript e na biblioteca jquery.. eu não consegui enteder o que ele fez..

 

alguem poderia adaptar o codigo abaixo para eu entender?

agradeço muito a todos que puderem me ajudar....

e se puderem tbm me indicar algum livro bom.. eu agradeço muito a colaboração!!

obrigado!

 

<!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>Untitled Document</title>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script  type="text/javascript">

	$(document).ready(function(){
		$("#abrir").hide();

		$('.abrirDiv').click(function(){
			$("#abrir").slideDown('slow');
		})	

		$(".esconderDiv").click(function(){
			$("#abrir").slideUp('slow');	
		})




	})

</script>

<style type="text/css">
h1{ margin:0; padding:0 }
#geral { width:600px; margin: 0 auto; padding:10px; border: 1px solid #CCC; }
#selectx { background:#CCC; width:auto;}
#abrir { background:#09C; color:#FFF }

</style>

</head>

<body>

<div id="geral">

       <div id="selectx">
           <form>
               <select name="">
                   <option value="" class="esconderDiv">Escolha...</option>
                   <option value="" class="abrirDiv">será que abre uma div</option>
               </select>
           </form>

      </div>

      <div id="abrir">
           <h1>tchanãããã! parabéns você consegui abrir a div</h1>
      </div>




</div>


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

                <select name="escolher">
                   <option value="esconde">Escolha...</option>
                   <option value="mostra">será que abre uma div</option>
               </select>

e então:

$("select[name='escolher']").change(function(){
   if( $( this ).val()=='esconde' )
      $('#abrir').slideDown('slow');
   else
      $('#abrir').slideUp('slow');
});

entendeu ?

 

não faz sentido usar click nos options, por isso troquei por um onchange no select.

Vejo qual é o value do option escolhido, e decido oq fazer.

 

http://wbruno.com.br/blog/2011/09/17/alguns-livros-ja-li/

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