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:
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.
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:
Another cool way to find out interesting things about JavaScript is to access our project page!
Another week to bring you the top yield platforms for three of the most prominent…
If you hold a large volume of LEDU tokens above 1 million units and wish…
It’s another week and like always we have to explore the top yield platforms for…
At a time where we’re constantly seeking tools and strategies to simplify our crypto investments,…
As we kick off another week, it's time to explore the top yield platforms for…
We're excited to share that Education Ecosystem was recently featured in an article on Business…
View Comments
Damn! Never thought of using jQuery to do this.