E-Learning

Learn JavaScript – How to Get a Select Value in a Dropdown List?

 
How to recover in JavaScript, the value of an option in a dropdown list? Before anything else, we must remember that we can retrieve different information from that option. Let´s take a look at the terminology used to name different things related to an option.

Consider the example below:

<Select>
<option value="Hello">Hello World</ Option>
</ Select>

The above option has the following information:

  • Index = 0
  • Value = Hello
  • Text = Hello World

 

JavaScript – How to recover the value of a selected option in a dropdown list

Keeping in mind what we stated above, we know that we can recover the index, the value or text. If you have the example below:

<select id="DdlViewBy">
<option  value  =  "1"  >  test1  </ Option>
<option value="2" selected="Selected">test2</ Option>
<option  value  =  "3"  >  test3  </ Option>
</ Select>

When running the following code:

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

The return would be the value 2.

If we want to recover the text of the option selected, the following code can be used:

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

And the returned value would be test2.
 

JavaScript – Using jQuery

If you can use jQuery, this operation becomes simpler. The code to retrieve the value or text of the selected option can be created following the model below:

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

These are the ways we had to share this article. Do you know other ways to do this operation in JavaScript?  Share your comments in the section below!

If you want to explore other questions, you can check LCTV videos on JavaScript. Below are some examples:

You can also subscribe to some channels that broadcast in JavaScript, such as the following:

Michaeljcalkins

Rdegges

Another cool way to find out interesting things about JavaScript is to access our project page!

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