Ir para conteúdo

POWERED BY:

Arquivado

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

mows

[Resolvido] Ao selecionar algum valor na combo trazer div escondi

Por , em Javascript

Recommended Posts

mows    0

mows
Postado

Boa tarde pessoal, estou com um problema num código em javascript.

 

Quero que ao selecionar um valor numa combo, a pagina carregue uma div que está escondida.

 

Para isso estou usando o seguinte código:

 

<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('P7').onchange = setDiv;
        }
</script>
<html>
        <head>
                <title>Menu DIV</title>
        </head>
        <body>
                <select id="P7">
                        <option value="default">        Selecione   </option>
                        <option value="4">      Div 1           </option>
                </select>               
                
                <div id="area">                 
                        <div id="4" style="border:solid 1px #000000;visibility:hidden;position:absolute;">  CONTEUDO DA DIV 1   </div>
                </div>          
        </body>
</html>

Num arquivo .HTML eu consigo rodar, num arquivo .ASP não.

E outro problema, ele roda em HTML mas somente no IE e não no chrome e nem no firefox.

 

Alguém poderia me ajudar?!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Ribeiro    4

Daniel Ribeiro
Postado

Pra trabalhar com a visibilidade de um elemento HTML tente utilizar a propriedade style.

 

getElementById('div').style.display = 'block';

 

ou

 

getElementById('div').style.display = 'none';

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, tem vários errinhos no teu código:

 

-> <script></script> deve vir dentro do <head> ou dentro do <body>(prefira dentro da seção head)

-> a tua atribuição da variavel element não faz o menor sentido.

-> ao nomear IDs, não comece com digitos numéricos(na verdade, evite usar numeros)

-> childNodes não faz muito sentido nesse contexto também.

 

Exemplo:

<html>
<head>
	<title>Menu DIV</title>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function setDiv( el )
{
	var areaDivs = id('area').getElementsByTagName('div');
	
	for(var i=0; i<areaDivs.length; i++)
		areaDivs[i].style.visibility = 'hidden';         
	
	if ( el.value != 'default')
		id( el.value+'' ).style.visibility = 'visible';
}
window.onload = function()
{
	id('P7').onchange = function()
	{
		setDiv( this );
	}
}
</script>
</head>
	<body>
		<select id="P7">
			<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 #f00;visibility:hidden;">CONTEUDO DA DIV 1</div>
			<div id="div2" style="border:solid 1px #0f0;visibility:hidden;">CONTEUDO DA DIV 2</div>
			<div id="div3" style="border:solid 1px #00f;visibility:hidden;">CONTEUDO DA DIV 3</div>
			<div id="div4" style="border:solid 1px #f0f;visibility:hidden;">CONTEUDO DA DIV 4</div>
		</div>          
	</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

mows    0

mows
Postado

Obrigado William, agora deu certo.

Abraços.

 

O código deu certo no Firefox e Chrome, porém não funciona no IE, alguém tem alguma idéia do porque?!

Agradeço a ajuda.

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