Ir para conteúdo

POWERED BY:

Arquivado

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

Guizera

[Resolvido] Esconder/Mostrar Div.

Por , em Javascript

Recommended Posts

Guizera    0

Guizera
Postado

Galera, segue o código que estou usando para ocultar e mostrar div de acordo com o que é preenchido no Combobox.

Como posso corrigir ?

 

Obrigado

 

JavaScript

function showDiv(div)
{
   document.getElementById("plano1").className = "invisivel";
   document.getElementById("form1teste").className = "invisivel";
   document.getElementById("form2teste").className = "invisivel";

   document.getElementById(div).className = "visivel";
}

CSS

.invisivel { display: none; }
.visivel { visibility: visible; }

<select id="combobox" name="combobox" onchange="showDiv(this.value);">
  <option value="plano1">Digite a quantidade de Formaçoes</option>  
  <option value="form1teste">1</option>
  <option value="form2teste">2</option>
</select>


<div id="form1teste" class="invisivel">
Conteúdo Div 1
</div>

<div id="formteste" class="invisivel">
Conteúdo Div 2
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

Cara fiz um código aqui usando Jquery para esconder as div conforme você passou....

Veja se é mais ou menos isso... :rolleyes:

 

Segue o 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>Esconde DIV</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#form1teste').css('display','none');
$('#form2teste').css('display','none');
$('#combobox').change(function(){
	if ($('#combobox').val() == "form1teste"){
		$('#form2teste').hide('slow'); 
		$('#form1teste').show('slow');
	}else if($('#combobox').val() == "form2teste"){ 
	    $('#form1teste').hide('slow');     
		$('#form2teste').show('slow');
	}
	if($('#combobox').val() == ""){ 
	    $('#form1teste').css('display','none');
		$('#form2teste').css('display','none');
	}
});
$('#combobox').change();
});
</script>
</head>
<body>
<select id="combobox" name="combobox">
  <option value="">Digite a quantidade de Formaçoes</option>  
  <option value="form1teste">1</option>
  <option value="form2teste">2</option>
</select>


<div id="form1teste" class="invisivel">
Conteúdo Div 1
</div>

<div id="form2teste" class="invisivel">
Conteúdo Div 2
</div>

</body>
</html>

 

Certooo? :thumbsup: valeuu

Compartilhar este post

Link para o post
Compartilhar em outros sites

DannyND    1

DannyND
Postado

Ressuscitando ..

 

Como faço para passar parâmetros com nome de função? Exemplo:

<!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>Esconde DIV</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

function nomefuncao(var1,var2){
$(document).ready(function() {
	$('#form1teste').css('display','none');
	$('#form2teste').css('display','none');
	$('#combobox').change(function(){
		if ($('#combobox').val() == "form1teste"){
			$('#form2teste').hide('slow'); 
			$('#form1teste').show('slow');
		}else if($('#combobox').val() == "form2teste"){ 
		    $('#form1teste').hide('slow');     
			$('#form2teste').show('slow');
		}
		if($('#combobox').val() == ""){ 
		    $('#form1teste').css('display','none');
			$('#form2teste').css('display','none');
		}
	});
	$('#combobox').change();
});
}

</script>
</head>
<body>

<?php
$var1 = 1234;
?>

<select id="combobox" name="combobox" onchage="nomefuncao('<?=$var1?>',this)">
   <option value="">Digite a quantidade de Formaçoes</option>  
   <option value="form1teste">1</option>
   <option value="form2teste">2</option>
</select>


<div id="form1teste" class="invisivel">
Conteúdo Div 1
</div>

<div id="form2teste" class="invisivel">
Conteúdo Div 2
</div>

</body>
</html>

Cara fiz um código aqui usando Jquery para esconder as div conforme você passou....
Veja se é mais ou menos isso... :rolleyes:

Segue o 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>Esconde DIV</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#form1teste').css('display','none');
	$('#form2teste').css('display','none');
	$('#combobox').change(function(){
		if ($('#combobox').val() == "form1teste"){
			$('#form2teste').hide('slow'); 
			$('#form1teste').show('slow');
		}else if($('#combobox').val() == "form2teste"){ 
		    $('#form1teste').hide('slow');     
			$('#form2teste').show('slow');
		}
		if($('#combobox').val() == ""){ 
		    $('#form1teste').css('display','none');
			$('#form2teste').css('display','none');
		}
	});
	$('#combobox').change();
});
</script>
</head>
<body>
<select id="combobox" name="combobox">
   <option value="">Digite a quantidade de Formaçoes</option>  
   <option value="form1teste">1</option>
   <option value="form2teste">2</option>
</select>


<div id="form1teste" class="invisivel">
Conteúdo Div 1
</div>

<div id="form2teste" class="invisivel">
Conteúdo Div 2
</div>

</body>
</html>
Certooo? thumbsup.gif valeuu

 

 

O que preciso é enviar uma variável hidden, gravar essa variável no banco de dados MySQL e retornar exibir o combobox depois da gravação.

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