JavaScript - Como recuperar o valor de uma opção selecionada numa lista dropdown?

Como fazer para recuperar, no JavaScript, o valor de uma opção numa dropdown list? Antes de qualquer coisa, devemos nos lembrar de que podemos obter diferentes informações dessa opção dentro do JavaScript. Vamos então, analisar um pouco a terminologia utilizada para nomear coisas diferentes relacionadas com uma opção dentro do código.

Considere o exemplo abaixo:

&lt;select&gt;
&lt;option value="hello"&gt;Hello World&lt;/option&gt;
&lt;/select&gt;

<option value="hello">Hello World</option>

</select>

A opção acima possui as seguintes informações:

Index = 0
Valor = hello
Texto = Hello World

JavaScript – Como recuperar o valor de uma opção selecionada numa dropdown list

Tendo em vista o exemplo acima, podemos recuperar então o index, o valor ou o texto. Caso tenhamos o exemplo abaixo:

&lt;select id="ddlViewBy"&gt;
&lt;option value="1"&gt;test1&lt;/option&gt;
&lt;option value="2" selected="selected"&gt;test2&lt;/option&gt;
&lt;option value="3"&gt;test3&lt;/option&gt;
&lt;/select&gt;

</select>

E rodarmos o código à seguir:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

1 2	var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].value;

O retorno dele seria o valor 2.

Caso desejarmos recuperar o texto da opção selecionada, o código abaixo pode ser utilizado:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

1 2	var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].text;

E o valor retornado seria test2.

JavaScript – Utilizando jQuery para recuperar valor de uma lista dropdown

Caso seja possível utilizar o jQuery, esta operação se torna mais simples. O código para recuperar o valor ou texto da opção selecionada pode ser criado seguindo o modelo abaixo:

$("# ddlViewBy :selected").text(); // The text content of the selected option
$("# ddlViewBy").val(); // The value of the selected option

1 2	$("# ddlViewBy :selected").text(); // The text content of the selected option $("# ddlViewBy").val(); // The value of the selected option

Estas são as formas mais que tínhamos para compartilhar neste artigo. Você conhece outras maneiras de fazer esta operação no JavaScript? Compartilhe seus comentários na seção abaixo!

Se você quiser explorar outros assuntos sobre javaScript, você pode acessar os vídeos da LCTV sobre o tema. Abaixo estão alguns exemplos: