In JavaScript, we often come across user-friendly web pages which include a questionnaire or a form to get the value of single or multiple selected options. Moreover, while dealing with a quiz-based web page, we want to notify the user regarding the status against the provided answer with a value(Correct, Wrong). In such cases, retrieving the selected values from the Dropdown is very helpful in providing clarity and saving time on the user’s end.
This article will guide you to retrieve selected values from a Dropdown list in JavaScript.
How to Get/Retrieve Selected Value from Dropdown in JavaScript?
To retrieve Selected Value from Dropdown in JavaScript, you can use:
-
- “value” property.
- “selectedIndex” property.
We will now go through each of the mentioned approaches one by one!
Method 1: Get/Retrieve Selected Value from Dropdown in JavaScript Using value Property
The “value” property returns the value attribute of a text field. We will utilize this method to get the selected option from a dropdown list and display its value:
Syntax
Here, the “value” property will return the particular value selected from the dropdown list.
Let’s go through the following example for a better understanding of the concept:
Example
In this example, we will specify the id named “select” and insert the option values to be selected in the dropdown list. These option values will be placed within the “<option>” tags.
Now, we will include a button with an “onclick” event. This will work in such a way that when the button with value “Check option” be pressed, the function “selectValue()” will be triggered:
<select id= "select">
<option value= "Male">Male</option>
<option value= "Female">Female</option>
</select></p>
<p> The value of the Gender selected is:
<span class= "output"></span>
</p>
<button onclick= "selectValue()"> Check option </button>
Next, we will declare a function named “selectValue()”. Here, we will use the “document.querySelector()” method to access the id of the created drop-down menu. After that, we will get the value of the selected gender from the dropdown list using the “value” property. Lastly, the “textContent” property will return the text content of the selected value and display it:
function selectValue() {
select= document.querySelector('#select');
output= select.value;
document.querySelector('.output').textContent= output;
}
</script>
The output of the above implementation will result as follows:
Method 2: Retrieve Selected Value from Dropdown in JavaScript Using “selectedIndex” Property
The “option” property returns a collection of all <option> elements and the “selectedIndex” property returns the index of the selected option from the “option” property in a drop-down list. We will use both together to select a specified option and display the corresponding option’s value by accessing its index.
Syntax
The above-given syntax will assist in fetching the value of the selected dropdown menu option using its index.
Look at the following example for demonstration:
Example
We will now utilize the same HTML code given in the previous example and make some changes in the JavaScript code. To do so, we will define the function “selectValue()” and access the assigned id of the dropdown menu named “select” with the help of the document.querySelector() method. After that, we will use the “options” property in combination with other properties, including “selectedIndex” to retrieve the value of the selected option.
Lastly, the “textContent” property will be used in this method to return the text content of the selected value and display the corresponding value:
function selectValue() {
select= document.querySelector('#select');
output= select.options[select.selectedIndex].value;
document.querySelector('.output').textContent= output;
}
</script>
Output
We have provided the easiest methods to retrieve a selected value from Dropdown in JavaScript.
Conclusion
To get/retrieve selected value from Dropdown in JavaScript, apply the “value” property for getting the selected item’s value from the dropdown list and the “option” property along with the “selectedIndex” property to get the set of options and get the value of the selected option by accessing the particular option’s index. This write-up has explained the methods to get/retrieve selected values from dropdown in JavaScript.
