Selecione JavaScript

exp | JavaScript | log | open | sin | split

Michael Zippo

Como você aprenderá a criar formulários da web, uma das tarefas mais comuns é obter valores ‚Äã‚Äãde menus suspensos. Neste artigo, vamos aprender como obter esses valores ‚Äã‚Äãcom JavaScript.

Vamos fazer um rápido resumo sobre como criar um elemento suspenso usando HTML. Siga meu Codepen se você se perder.

para construir nosso elemento suspenso, precisamos usar o select e usar a opção filhos aninhados abaixo. O elemento de seleção cria o menu suspenso e com as tags de opção definimos essas opções no menu suspenso ao vivo.

Vamos criar um menu suspenso de nossas frutas favoritas (que têm emojis).

adicionamos um h2 vazio que preencheremos com JavaScript posteriormente. Neste ponto você pode escolher sua fruta favorita:

Aqui acessamos o atributo options d ` elemento array. Em seguida, escolhemos o índice da opção selecionada e acessamos seu valor ou texto.

Agora tente console.log ambas as variáveis. O que está acontecendo? Nada. Por quê? Porque nosso primeiro elemento tem um valor vazio (é apenas um espaço reservado). Dê sua opinião sobre a primeira opção e tente novamente. Yay! Obtemos o valor e o texto com o javascript.

Ouvindo as alterações do menu suspenso com javascript

Precisamos tornar nosso menu suspenso dinâmico porque JavaScript é projetado para reagir a alterações em sua página. Com isso em mente, vamos atribuir um eventListener ao nosso elemento fruit.

Com nosso eventListener, ouvimos uma mudança em nosso menu suspenso. Observe que você também pode obter o valor da opção selecionada executando e.target.value, que você provavelmente viu em outro módulo do tutorial.

estamos aqui. Agora você pode selecionar uma opção de fruta e o JavaScript reagirá às alterações em nosso menu suspenso e atualizará nosso h2 de acordo. Lei bem sucedida

Conclusão

Como desdobrar valores ‚Äã‚Äãé uma habilidade essencial quando você aprende desenvolvimento web. os valores que obtemos são importantes se queremos atualizar uma seleção básica de dados para o usuário ou apenas "reaja" às mudanças no DOM. Com JavaScript podemos obter esses valores ‚Äã‚Äãem pouco tempo