Descrição em select

Novembro 29, 2007

Pessoal, tenho o seguinte select abaixo em um formulário:

<select name="opcoes">
  <option value="1" selected>Opção 1</option>
  <option value="2">Opção 2</option>
  <option value="3">Opção 3</option>
</select>

Por padrão a Opção 1 fica setada ao abrir o formulário, então gostaria ao lado do select aparecesse um texto descritivo sobre a opção, e quando o usuário clicar na opção 3 ou 2 a descrição da opção 1 fosse substituída de acordo com a opção selecionada!

Agradeço quem puder ajudar!

KaKarotto · Novembro 29, 2007

Olha, uma maneira que eu pensei de fazer isso é com javascript assim:

arquivo:Js

function descOP(){
var descricao=document.getElementById('descricao')
descricao.value=this.options[this.selectedIndex].title
}

window.onload=function(){
document.getElementById('selecao').onchange=descOP
}

arquivo:Html

<select id="selecao">
<option value="1" selected title="Descrição da Opção 1">Opção 1</option>
<option value="2" title="Descrição da Opção 2">Opção 2</option>
<option value="3" title="Descrição da Opção 3">Opção 3</option>
</select>
<input type="text" id="descricao" value="Descrição da Opção 1"/>

É bem genérico esse código em js, você poderia incluir centenas e centenas de options que ele funcionaria sem você precisar mexer no código em javascript. Claro, você vai ter que colocar a descrição em todas as tags options, o que deixa seu HTML mais bem feito.

você pode formatar a caixa de texto pra ficar bonitinho e tal. O javascript pode ser salvo em um arquivo .js a parte, assim você só precisa fazer a chamada entre das tags <head></head> assim:

Se não souber como fazer includes em js, ou como incluir o js diretamente no html me avisa.

Kelabrasssss

PodePerguntar · Novembro 29, 2007

enteressante :mellow:

Editado Novembro 29, 2007 por PodePerguntar

Entrar

Descrição em select

Pergunta

Guest Freddys

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

PodePerguntar

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades