Como incluir uma caixa de seleção dinâmica no JavaScript

Escrito por sue smith Google | Traduzido por cezar rosa
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como incluir uma caixa de seleção dinâmica no JavaScript
Formulários em HTML podem capturar diversos tipos de informações do usuário (Erik Snyder/Lifesize/Getty Images)

As páginas da web podem apresentar elementos para entrada de dados do usuário através de formulários, capturando informações e enviando-as para os scripts no servidor. Os elementos "select" e "option" em HTML permitem aos desenvolvedores criar listas suspensas ou caixas de seleção. Com elas, o usuário pode selecionar algumas informações a partir de um conjunto de opções pré-definidas. Ao adicionar uma função JavaScript para sua página, você pode alterar o conteúdo de um elemento "select" dinamicamente, de acordo com a interação do usuário com a sua página. Os objetos "select" e "option" permitem criar e adicionar novas opções para seus usuários.

Outras pessoas estão lendo

Instruções

  1. 1

    Adicione o elemento "select" em sua página. Insira o seguinte exemplo em HTML entre o começo e o final das tags "body" em sua página web:

    <select id="elementoSelect"> <option value="gato"> Gato </option> <option value="cachorro"> Cachorro </option> <option value="rato"> Rato </option> </select>

    Este elemento apresenta três opções que representam diferentes animais. Você pode alterar o conteúdo das opções de acordo com os dados que você está tentando capturar.

  2. 2

    Adicione uma seção para JavaScript dentro de sua página. Entre o começo e o final de tags "head" em seu arquivo, adicione o seguinte código:

    <script type="text/javascript"> // funções aqui </script>

    Você pode adicionar quaisquer funções JavaScript nesta seção e os elementos da página serão capazes de chamá-las na interação do usuário ou em qualquer outro evento. Você também pode incluir o seu JavaScript em um arquivo separado e adicionar um link para ele na seção "head", como uma forma alternativa.

  3. 3

    Adicione uma função para processar a sua alteração de opção na caixa de seleção. Insira este esboço de função entre o começo e o final das tags de script em sua seção "head" da página:

    function addOption() { // implementar inclusão de uma opção }

    Dentro dessa função, você pode adicionar o código para alterar dinamicamente o conteúdo do seu elemento "select". Você pode configurar a página para chamar essa função em um evento que seja adequado à funcionalidade de sua página.

  4. 4

    Implemente sua operação de inclusão dinâmica. Dentro de sua função JavaScript, utilize o código a seguir para buscar a referência do elemento "select" de sua página:

    var selectElem = document.getElementById("elementoSelect");

    Você pode alternativamente passar o atributo ID do elemento "select" como um parâmetro caso seja mais adequado em sua página. Este código armazena uma referência para o elemento em uma variável. Insira o código abaixo para adicionar uma nova opção para o elemento "select":

    selectElem.add (new Option("Galinha", "galinha"), null);

    Este código cria um novo objeto "option", e em seguida adiciona o elemento ao "select", passando-o como um parâmetro para a função "add". O código de criação do objeto "option" passa o conteúdo e o valor da opção que irá aparecer dentro da página, então altere-o para atender às suas próprias necessidades.

  5. 5

    Chame sua função JavaScript. Você pode executar a função da interação do usuário com os outros elementos em sua página, mas para esta demonstração você pode alterar a tag de abertura "body" da seguinte forma:

    <body onload="incluirOpcao()">

    Isso vai chamar a função assim que o navegador do usuário carregar a página. Salve o arquivo HTML e abra-o no navegador. Clique no elemento de seleção para ver seu conteúdo. Você deverá ver a nova opção adicionada junto com as opções originais descritas no HTML.

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