Ir para conteúdo

POWERED BY:

Arquivado

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

vitinho.vitor

[Resolvido] Campos com SELECT

Por , em Desenvolvimento frontend

Recommended Posts

vitinho.vitor    0

vitinho.vitor
Postado

Olá, gostaria de algum código que, quando a pessoa selecionar a opção 1 aparecesse uma coisa e na opção 2 outra. Na mesma página. Vi algo com divs porém nao funciona no Google Chrome.

 

Desde já agradeço

Vitor

 

ps: pode ser com RADIO , SELECT ou outro semelhante

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
http://www.wbruno.com.br/blog/?p=68

Compartilhar este post

Link para o post
Compartilhar em outros sites

vitinho.vitor    0

vitinho.vitor
Postado

Olá, peguei o código do blog porém, quando entro na página, todas as divs estão aparentes e quando eu seleciono algo, nada acontece. O que poderia ser?

 

<html>
<head>
<script type="text/javascript">
function id( el ){
        return document.getElementById( el );
}
function mostra( el ){
        id( el ).style.display = ‘block’;
}
function esconde_todos( el, tagName ){
        var tags = el.getElementsByTagName( tagName );
        for( var i=0; i<tags.length; i++ )
        {
                tags[i].style.display = ‘none’;
        }
}
window.onload = function()
{
        id(‘Masculino’).style.display = ‘none’;
        id(‘Feminino’).style.display = ‘none’;
       
        id(’sel-sexo’).onchange = function()
        {
                esconde_todos( id(‘palco’), ‘div’ );
                mostra( this.value );
        }
        var radios = document.getElementsByTagName(‘input’);
        for( var i=0; i<radios.length; i++ ){
                if( radios[i].type==‘radio’ )
                {
                        radios[i].onclick = function(){
                                esconde_todos( id(‘palco’), ‘div’ );
                                mostra( this.value );
                        }
                }
        }
}
</script>
</head>
<body>
       
        <select name="sel-sexo" id="sel-sexo">
                <option value="">–</option>
                <option value="Feminino">Feminino</option>
                <option value="Masculino">Masculino</option>
        </select>
        <label><input type="radio" name="rd-sexo" value="Feminino" />Feminino</label>
        <label><input type="radio" name="rd-sexo" value="Masculino" />Masculino</label>
       
        <div id="palco">
                <div id="Masculino">Seu sexo é Masculino!</div>
                <div id="Feminino">Seu sexo é Feminino!</div>
        </div>
</body>
</html>

Obrigado

Vitor

 

 

Ps: estou fazendo o teste com os seus exemplos para depois alterar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Sim, as divs estão aparentes porque elas são escondidas apenas quando a página é carregada. Observe:

window.onload = function(){    id('Masculino').style.display = 'none';    id('Feminino').style.display = 'none';    [...]
Para evitar isso, você tem duas possibilidades:

 

1) Definir o display:none diretamente no CSS;

2) Criar as divs dinamicamente via JS.

 

 

Agora, em qual browser você testou? Fiz alguns testes aqui e funcionou normalmente no FF e no IE8...

 

Veja o seu código já aplicado com um Doctype e também validado de acordo com os padrões:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<title>Radio</title>	<script type="text/javascript">	function id( el )	{		return document.getElementById( el );	}	function mostra( el )	{		if( id( el ) )		{			id( el ).style.display = 'block';		}	}	function esconde_todos( el, tagName )	{		var tags = el.getElementsByTagName( tagName );		for( var i = 0; i < tags.length; i++ )		{			tags[i].style.display = 'none';		}	}	window.onload = function()	{		id('Masculino').style.display = 'none';		id('Feminino').style.display = 'none';   		id('sel-sexo').onchange = function()		{			esconde_todos( id('palco'), 'div' );			mostra( this.value );		}		var radios = document.getElementsByTagName('input');		for( var i = 0; i < radios.length; i++ )		{			if( radios[i].type == 'radio' )			{				radios[i].onclick = function()				{					esconde_todos( id('palco'), 'div' );					mostra( this.value );				}			}		}	}	</script></head><body>	<form action="#" method="post">		<fieldset>			<select name="sel-sexo" id="sel-sexo">				<option value="-"></option>				<option value="Feminino">Feminino</option>				<option value="Masculino">Masculino</option>			</select>			<label for="f"><input type="radio" name="rd-sexo" id="f" value="Feminino" /> Feminino</label>			<label for="m"><input type="radio" name="rd-sexo" id="m" value="Masculino" /> Masculino</label>		</fieldset>	</form>	<div id="palco">			<div id="Masculino">Seu sexo é Masculino!</div>			<div id="Feminino">Seu sexo é Feminino!</div>	</div></body></html>
Obs.: Adicionei uma verificação na função mostra( el ) para evitar erro quando selecionamos a opção "-" do <select>, e defini um "-" para o value do <option> também.

 

 

:joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites

vitinho.vitor    0

vitinho.vitor
Postado

Muito obrigado, à prncipio está tudo certo, se tiver algum outro erro eu grito!!! Imagem Postada :joia:

Uso o Chrome e FF.

obs: só tive que alterar para

<meta content='text/html; charset=ISO-8859-1 http-equiv='Content-Type'/>

 

Abs

Vitor!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito