Ir para conteúdo

POWERED BY:

Arquivado

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

JorgeS

[Resolvido] form

Por , em Javascript

Recommended Posts

JorgeS    0

JorgeS
Postado 

<select id="input_3" name="q3_pizza3">
                       <option>  </option>
                       <option value="camponesa"> camponesa </option>
                       <option value="4 Estações"> 4 Estações </option>
                       <option value="queijo"> queijo </option>
                       <option value="alema"> alema </option>
                       <option value="italiana"> italiana </option>
                   </select>

Tenho este formulario e queria que ao mudar o valor do selsect ao lado aparecesse a foto respectiva da pizza;

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Okay.

 

no evento onchange dispare uma function que mostre a tua div.

por exemplo, ja tendo a tua pizza escondida, assim:

 

http://www.wbruno.com.br/blog/2010/07/28/ocultarmostrar-elementos-apartir-de-radio-select/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Ae amigo tera de usar uma funcao js e coloca-la no onchange do select, eu considero algo simples, vou tentar mostrar uma forma...

 

Crie uma Div e coloque o id dela de image(apenas um exmeplo), e crie uma funcao assim.

 

function muda_imagem(imagem)
{
document.getElementById('image').innerHTML = imagem;
}

 

No combobo(select) fas assim.

 

<select id="teste" onchenge="muda_imagem('this.value');" />
 <option value="imagens/camponesa.png"> camponesa </option>
</select>

 

Voce pode passar no value ja o cominho da imagem, ou um outro valor re tratar na funcao vlw.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Ae cara, bom eu fix com cores, pra voce entender, e muito simples...

<!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>Teste</title>

<script>
function muda_cor(cor)
{
document.getElementById('div_cor').style.background = cor;
}
</script>
</head>

<body>
<select id="combo" name="combo" onchange="muda_cor(this.value);"/>
<option value="#F00">Vermelho</option>
<option value="#00F">Azul</option>
<option value="#000">Preto</option>
<option value="#FFF">Branco</option>
</select>
<br />
<br />	
<div id="div_cor" style="text-align:center; color:#F0F; width:100px; height:100px; border:1px solid #000;">Teste</div>
</body>
</html>

 

qualquer coisa posta ai;

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ser iniciante, não é desculpa para vir no fórum pedindo 'codigo pronto'

 

o post que linkei, resolve o problema.

bastava você entender o codigo, e tentar usar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

JorgeS    0

JorgeS
Postado

ser iniciante, não é desculpa para vir no fórum pedindo 'codigo pronto'

 

o post que linkei, resolve o problema.

bastava você entender o codigo, e tentar usar.

mas com aquele codigo nao consegui

 

ser iniciante, não é desculpa para vir no fórum pedindo 'codigo pronto'

 

o post que linkei, resolve o problema.

bastava você entender o codigo, e tentar usar.

mas com aquele codigo nao consegui

e e muito complexo para trabalhar quero uma coisa mais simples

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Brother nosso caro moderador tem razao codigo pronto eh tenso, desde meu primeiro post aqui ja daria de resolver, por isso fique mais atento.

Desta vez vou ser bonsinho, mais nao acostuma ;D

 

<!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>Teste</title>

<script>
function muda_imagem(imagem)
{
document.getElementById('div_imagem').innerHTML = '<img src="'+imagem+'" />';
}
</script>
</head>

<body>
<select id="combo" name="combo" onchange="muda_imagem(this.value);"/>
<option value="imagem/imagem1.png">img_1</option>
<option value="imagem/imagem2.png">img_2</option>
<option value="imagem/imagem3.png">img_2</option>
<option value="imagem/imagem4.png">img_4</option>
</select>
<br />
<br />	
<div id="div_imagem" style="text-align:center; width:100px; height:100px; border:1px solid #000;"></div>
</body>
</html>

 

Vlw.

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