Ir para conteúdo

POWERED BY:

Arquivado

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

wertycs

[Resolvido] Mostrar texto com opções javascript

Por , em Javascript

Recommended Posts

wertycs    0

wertycs
Postado

Boa noite galera,

É o seguinte, tenho o código abaixo que, ao escolher uma opção no campo ele mostrará o texto referente a essa opção. Porém ao mostrar o texto o campo com as opções desaparece. Como faço para mostrar o texto abaixo da caixa de opções?

 

Exemplo de como deve aparecer.

 

texto.jpg

 

 


<html>
<head>
<title>Estudos JavaScript</title>

<script type="text/javascript">

 function mudancaSelecao(elemento){
 var selecionada = elemento.options[elemento.options.selectedIndex];  

document.write(selecionada.value);}
</script>

</head>
<body>

<form name="form1">
 <select name="itens" id="itens" onchange="mudancaSelecao(this)">
   <option value="texto 1 a ser mostrado" selected="selected">Opção 1</option>
   <option value="texto 2 a ser mostrado">Opção 2</option>
   <option value="texto 3 a ser mostrado">Opção 3</option>
   <option value="texto 4 a ser mostrado">Opção 4</option>
   <option value="texto 5 a ser mostrado">Opção 5</option>
   <option value="texto 6 a ser mostrado">Opção 6</option>
 </select>
</form>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não use document.write()

 

mas sim um style.display = 'block'; ou então um .innerHTML direcionando para outro elemento.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 
<html>
<head>
<title>Estudos JavaScript</title>

<script type="text/javascript">

function mudancaSelecao( elemento ){
  document.getElementById('result').innerHTML = elemento.value;
}
</script>

</head>
<body>

<form name="form1">
 <select name="itens" id="itens" onchange="mudancaSelecao(this)">
   <option value="texto 1 a ser mostrado" selected="selected">Opção 1</option>
   <option value="texto 2 a ser mostrado">Opção 2</option>
   <option value="texto 3 a ser mostrado">Opção 3</option>
   <option value="texto 4 a ser mostrado">Opção 4</option>
   <option value="texto 5 a ser mostrado">Opção 5</option>
   <option value="texto 6 a ser mostrado">Opção 6</option>
 </select>
 <div id="result"></div>
</form>

</body>
</html>

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