Ir para conteúdo

POWERED BY:

Arquivado

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

rodrigopaivaf

[Resolvido] Show e Hide no option

Por , em Javascript

Recommended Posts

rodrigopaivaf    0

rodrigopaivaf
Postado

Dúvida:

 

Tem como exibir um div e ocultar outros dependendo da opção que eu selecionar?

 


<select id="type" name="type" size="1">

  <option value="A">A</option>
  <option value="B" >B</option>
  <option value="C" selected >C</option>

</select>

<div id="A">
<input name="A" value="A">
</div>

<div id="B">
<input name="B" value="B">
</div>

<!-- Exibir esse div pois está selecionado -->
<div id="C">
<input name="C" value="C">
</div>

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo:

<html>
<head>
<style type="text/css">
fieldset {
	border: none;
}
</style>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function toogle_labels( el ){
	var labels = id('campos').getElementsByTagName('label');
	for( var i=0; i<labels.length; i++ )
	{
		labels[i].style.display = 'none';
	}
	if( el!='' )
		id( el ).style.display = 'block';
}
window.onload = function(){
	toogle_labels( '' );
	id('type').onchange = function(){
		toogle_labels( this.value );
	}
}
</script>
</head>
<body>

	<form action="" method="">	
		<select id="type" name="type">
		  <option value="A">A</option>
		  <option value="B" >B</option>
		  <option value="C" selected="selected">C</option>
		</select>

		<fieldset id="campos">
			<label id="A">
				<input name="A" value="A" />
			</label>

			<label id="B">
				<input name="B" value="B" />
			</label>

			<label id="C">
				<input name="C" value="C" />
			</label>
		</fieldset>
	</form>
</body>
</html>

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