Como obter o valor de uma combo box com JavaScript

Escrito por cathlene s. baptista | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como obter o valor de uma combo box com JavaScript
JavaScript pode ser usado para obter os valores de muitos objetos de uma página da web, incluindo caixas de combinação (Comstock/Comstock/Getty Images)

JavaScript é uma linguagem de scripting que pode funcionar como uma linguagem orientada a objetos ou a procedimentos. É incorporada à maioria dos navegadores principais e executada quando uma página que inclua esse código é solicitada e carregada. Ela permite aos desenvolvedores da web operar com o "document object model" (DOM, modelo de objeto de documento), estabelecendo e recuperando valores para qualquer elemento que forme parte de uma página da web, incluindo objetos complexos como tabelas e valores "combo box" (caixa de combinação). Isso permite programar páginas dinâmicas que não precisam de atualizações ou solicitações do servidor.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto
  • Navegador da web com JavaScript habilitado

Lista completaMinimizar

Instruções

  1. 1

    Abra um editor de texto e crie um novo arquivo chamado "lerComboBox.html", adicione código HTML, incluindo uma seção <head> e uma seção <body>, e salve-o.

    <html> <head></head> <body></body> </html>

  2. 2

    Adicione um tag <form> à seção <body> do arquivo. Nomeie o formulário como "comboBoxForm" e coloque o atributo "size" como "1".

    <html> <head> </head> <body> <form name="comboBoxForm" size="1"> </form> </body> </html>

  3. 3

    Adicione um tag <select> entre as tags <form> e </form>. Nomeie o menu como "comboBoxMenu" e adicione três tags <option>. Configure o valor do texto da primeira opção como "um", configure o atributo de valor como "1" e feche a tag </option>. Adicione mais duas tags <option>, definindo o valor do texto como "dois" e "três", e o atributo de valor como "2" e "3", respectivamente. Feche a tag do menu </select>.

    <html> <head></head> <body> <form name="comboBoxForm" size="1"> <select name="comboBoxMenu"> <option value="1">um</option> <option value="2">dois</option> <option value="3">três</option> </select> </form> </body> </html>

  4. 4

    Abra uma tag <script> e coloque-a entre <head> e </head>. Defina "text/javascript" como valor do atributo "type" e feche a tag.

    <html> <head> <script type="text/javascript"> </script> </head> <body> <form name="comboBoxForm" size="1"> <select name="comboBoxMenu"> <option value="1">um</option> <option value="2">dois</option> <option value="3">três</option> </select> </form> </body> </html>

  5. 5

    Adicione uma função do JavaScript com o nome "lerComboBox()" entre as tags <script>.

    <html> <head> <script type="text/javascript"> function lerComboBox() { } </script> </head> <body> <form name="comboBoxForm" size="1"> <select name="comboBoxMenu"> <option value="1">um</option> <option value="2">dois</option> <option value="3">três</option> </select> </form> </body> </html>

  6. 6

    Digite um comando do JavaScript que utilize o objeto "document" para ler o valor selecionado no menu de combinação e escreva-o em um tag <span> cujo ID seja "comboSpan".

    <html> <head> <script type="text/javascript"> function lerComboBox() { selectedValue = document.comboBoxForm.comboBoxMenu.value; document.getElementById("comboSpan").innerHTML = selectedValue; } </script> </head> <body> <form name="comboBoxForm" size="1"> <select name="comboBoxMenu"> <option value="1">um</option> <option value="2">dois</option> <option value="3">três</option> </select> </form> </body> </html>

  7. 7

    Adicione uma tag <p> entre <body> </body>. Digite o texto "O valor da combo box é: " e feche a tag. Inclua um espaço depois dos dois pontos para separar o texto do valor da variável.

    <html> <head> <script type="text/javascript"> function lerComboBox() { selectedValue = document.comboBoxForm.comboBoxMenu.value; document.getElementById("comboSpan").innerHTML = selectedValue; } </script> </head> <body> <form name="comboBoxForm" size="1"> <select name="comboBoxMenu"> <option value="1">um</option> <option value="2">dois</option> <option value="3">três</option> </select> </form> <p>O valor do combobox é: </p> </body> </html>

  8. 8

    Adicione uma tag <span> dentro das tags <p> </p> e referencie o elemento "comboSpan". Feche a tag.

    <html> <head> <script type="text/javascript"> function lerComboBox() { selectedValue = document.comboBoxForm.comboBoxMenu.value; document.getElementById("comboSpan").innerHTML = selectedValue; } </script> </head> <body> <form name="comboBoxForm" size="1"> <select name="comboBoxMenu"> <option value="1">um</option> <option value="2">dois</option> <option value="3">três</option> </select> </form> <p>O valor do combobox é: <span id=”comboSpan”></span></p> </body> </html>

  9. 9

    Adicione uma tag <button> cujo texto seja "Clique para mostrar o valor da combo box". Adicione ao botão um evento onclick() que chame a função "lerComboBox()" e feche a tag.

    <html> <head> <script type="text/javascript"> function lerComboBox() { selectedValue = document.comboBoxForm.comboBoxMenu.value; document.getElementById("comboSpan").innerHTML = selectedValue; } </script> </head> <body> <form name="comboBoxForm" size="1"> <select name="comboBoxMenu"> <option value="1">um</option> <option value="2">dois</option> <option value="3">três</option> </select> </form> <p>O valor do combobox é: <span id=”comboSpan”></span></p> <button onclick="lerComboBox()">Clique para mostrar o valor do combobox</button> </body> </html>

  10. 10

    Abra o arquivo "lerComboBox.html" em um navegador da web. Clique no botão "Clique para mostrar o valor da combobox" e verifique que o texto na tag comboSpan <span> exibe o valor selecionado da comboBoxMenu.

Dicas & Advertências

  • As caixas de combinação são normalmente usadas para obter informações do usuário e enviá-las. Os dados são normalmente passados com o formulário para um script do lado do servidor que gerenciará a resposta.
  • O termo "caixa de combinação" faz referência a uma estrutura que permite ao usuário fazer uma seleção específica, ou digitar a sua própria opção se não quiser escolher nenhuma das opções disponíveis. Pode ser usado um campo de texto para permitir aos usuários digitarem sua opção.
  • Etiquete as caixas de combinação de forma clara para que o usuário possa entender a questão e respondê-la corretamente.
  • Pode usar-se a opção "selected" dentro de um tag para indicar o elemento do menu que será selecionado por padrão.
  • Se manipulada incorretamente, a propriedade innerHTML poderá causar problemas de segurança.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível