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:

<select>
<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:

<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>

E rodarmos o código à seguir:

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;

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

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:

Você também pode se inscrever para seguir canais que fazem transsmissões sobre JavaScript, como os abaixo:

Michaeljcalkins

Rdegges

Outra forma bacana de descobrir coisas interessantes sobre JavaScript é visitar nossa página de projetos!

Dr. Michael J. Garbade

I, Dr. Michael J. Garbade is the co-founder of the Education Ecosystem (aka LiveEdu), ex-Amazon, GE, Rebate Networks, Y-combinator. Python, Django, and DevOps Engineer. Serial Entrepreneur. Experienced in raising venture funding. I speak English and German as mother tongues. I have a Masters in Business Administration and Physics, and a Ph.D. in Venture Capital Financing. Currently, I am the Project Lead on the community project -Nationalcoronalvirus Hotline I write subject matter expert technical and business articles in leading blogs like Opensource.com, Dzone.com, Cybrary, Businessinsider, Entrepreneur.com, TechinAsia, Coindesk, and Cointelegraph. I am a frequent speaker and panelist at tech and blockchain conferences around the globe. I serve as a start-up mentor at Axel Springer Accelerator, NY Edtech Accelerator, Seedstars, and Learnlaunch Accelerator. I love hackathons and often serve as a technical judge on hackathon panels.

View Comments

Recent Posts

Win Big with Our Amazon Fire Max 11 & AirPods Pro Giveaway!

We’re thrilled to announce an exciting opportunity for you to win not one but two…

1 month ago

Unleashing Potential: How Education Ecosystem Transforms Learning into Real-World Success

Acquiring practical skills is crucial for career advancement and personal growth. Education Ecosystem stands out…

3 months ago

The Role of Artificial Intelligence in Modern Software Development

Artificial Intelligence (AI) has been making significant strides in various industries, and the software development…

6 months ago

Highest Stable Coin Yields – (W16 – 2024)

Another week to bring you the top yield platforms for three of the most prominent…

7 months ago

LEDU Token OTC Trading

If you hold a large volume of LEDU tokens above 1 million units and wish…

8 months ago

Highest Stable Coin Yields – (W12 – 2024)

It’s another week and like always we have to explore the top yield platforms for…

8 months ago