Ir para conteúdo

POWERED BY:

Arquivado

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

Leonardo  Garrido

DIV Aparecer e desaparecer com combo.

Recommended Posts

Olá galera,preciso da ajuda de vcs urgente... heheSeguinte...no trampo preciso desenvolver um esquema que através de um combobox eu possa selecionar um titulo e assim embaixo possa aparecer os dados desse item...A maneira q pensei foi ter várias divs... com cada uma tendo seu conteúdo e assim depois q a pessoa selecionar o item no combobox apareça a div com o conteúdo que ele selecionou...Fico no aguardo...obrigado...abraços....

Compartilhar este post


Link para o post
Compartilhar em outros sites

Um exemplo bem simples que montei:

 

<script>function MostraTitulo(titulo){document.getElementById("combo").innerHTML = titulo.options[titulo.selectedIndex].text;}</script><select name="titulo" onchange="MostraTitulo(this)"><option value="1">Título 1</option><option value="2">Título 2</option><option value="3">Título 3</option></select><div id="combo"></div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

O script da forma como você descreveu fica +ou- assim:

<script>	function setDiv(e){		try{var element = e.target		  }catch(er){};		try{var element = event.srcElement  }catch(er){};				var area = document.getElementById('area');				for(var i=0; i<area.childNodes.length; i++)			area.childNodes[i].style.visibility = 'hidden';						if (element.value != 'default')			document.getElementById(element.value).style.visibility = 'visible';	}		window.onload = function(){		document.getElementById('menu').onchange = setDiv;	}</script><html>	<head>		<title>Menu DIV</title>	</head>	<body>		<select id="menu">			<option value="default">	Selecione   </option>			<option value="div1">	   Div 1	   </option>			<option value="div2">	   Div 2	   </option>			<option value="div3">	   Div 3	   </option>			<option value="div4">	   Div 4	   </option>		</select>						<div id="area">						<div id="div1" style="border:solid 1px #000000;visibility:hidden;position:absolute;">  CONTEUDO DA DIV 1   </div>			<div id="div2" style="border:solid 1px #000000;visibility:hidden;position:absolute;">  CONTEUDO DA DIV 2   </div>			<div id="div3" style="border:solid 1px #000000;visibility:hidden;position:absolute;">  CONTEUDO DA DIV 3   </div>			<div id="div4" style="border:solid 1px #000000;visibility:hidden;position:absolute;">  CONTEUDO DA DIV 4   </div>		</div>			</body></html>

Faz um teste e adapta ao seu caso.

De qq forma esse recurso de master-detail que você precisa, fica muito melhor utilizando AJAX. http://forum.imasters.com.br/public/style_emoticons/default/yay.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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