Como recuperar o valor selecionado da suspensão JavaScript
No JavaScript, geralmente encontramos páginas da web amigáveis que incluem um questionário ou um formulário para obter o valor de opções selecionadas únicas ou múltiplas. Além disso, ao lidar com uma página da web baseada em questionários, queremos notificar o usuário sobre o status em relação à resposta fornecida com um valor (correto, errado). Nesses casos.
Este artigo o guiará a recuperar valores selecionados de uma lista suspensa no JavaScript.
Como obter/recuperar o valor selecionado do suspensão em javascript?
Para recuperar o valor selecionado do suspensão no JavaScript, você pode usar:
-
- ““valor" propriedade.
- ““SelectedIndex" propriedade.
Vamos agora passar por cada uma das abordagens mencionadas uma a uma!
Método 1: Obtenha/recupere o valor selecionado do suspensão no JavaScript usando a propriedade Value
O "valor”Propriedade retorna o atributo de valor de um campo de texto. Utilizaremos esse método para obter a opção selecionada de uma lista suspensa e exibir seu valor:
Sintaxe
SelectElement.valor
Aqui o "valor”Propriedade retornará o valor específico selecionado na lista suspensa.
Vamos passar pelo exemplo a seguir para uma melhor compreensão do conceito:
Exemplo
Neste exemplo, especificaremos o ID chamado “Selecione”E insira os valores da opção a serem selecionados na lista suspensa. Esses valores de opção serão colocados dentro do “" Tag.
Agora, incluiremos um botão com um “ONCLICKEvento. Isso funcionará de tal maneira que quando o botão com valor “Verifique a opção"Ser pressionado, a função"Selecione o valor()”Será acionado:
Selecione o gênero na lista suspensa fornecida:
O valor do gênero selecionado é:
class = "saída">
Em seguida, declararemos uma função chamada “Selecione o valor()”. Aqui, vamos usar o “documento.QuerySelector ()”Método para acessar o ID do menu suspenso criado. Depois disso, obteremos o valor do gênero selecionado da lista suspensa usando o “valor" propriedade. Por fim, o “TextContent”A propriedade retornará o conteúdo de texto do valor selecionado e o exibirá:
A saída da implementação acima resultará da seguinte maneira:
Método 2: Recuperar o valor selecionado do suspensão no JavaScript usando a propriedade "SelectedIndex"
O "opção”Propriedade retorna uma coleção de todos os elementos e o“SelectedIndex”Propriedade retorna o índice da opção selecionada do“opção”Propriedade em uma lista suspensa. Usaremos os dois juntos para selecionar uma opção especificada e exibir o valor da opção correspondente acessando seu índice.
Sintaxe
Selecione.Opções [selecione.SelectedIndex].valor
A sintaxe acima mencionada ajudará a buscar o valor da opção de menu suspenso selecionado usando seu índice.
Veja o exemplo a seguir para demonstração:
Exemplo
Agora utilizaremos o mesmo código HTML fornecido no exemplo anterior e fará algumas alterações no código JavaScript. Para fazer isso, definiremos a função “Selecione o valor()”E acesse o ID atribuído do menu suspenso chamado“Selecione”Com a ajuda do documento.Método querySelector (). Depois disso, usaremos o “opções”Propriedade em combinação com outras propriedades, incluindo“SelectedIndex”Para recuperar o valor da opção selecionada.
Por fim, o “TextContent”A propriedade será usada neste método para retornar o conteúdo de texto do valor selecionado e exibir o valor correspondente:
Saída
Fornecemos os métodos mais fáceis para recuperar um valor selecionado do suspensão no JavaScript.
Conclusão
Para obter/recuperar o valor selecionado do suspensão no JavaScript, aplique o “valor”Propriedade para obter o valor do item selecionado da lista suspensa e“opção”Propriedade junto com a“SelectedIndex”Propriedade para obter o conjunto de opções e obter o valor da opção selecionada acessando o índice da opção em particular. Esta redação explicou os métodos para obter/recuperar valores selecionados do suspenso no JavaScript.