A dropdown list allows users to select a value from the List of Values.
You can get selected value from Dropdown list using JavaScript using document.getElementById(‘DropDownName’).value snippet.
In this tutorial, you’ll learn how to get the selected value from the Dropdown list using JavaScript.
If You’re in Hurry…
The HTML DOM element value property is the simplest method to get the selected value from the Dropdown list.
Code
var selectList = document.getElementById('Gender');
console.log(selectList.value);
The code logs the selected value in the console.
If You Want to Understand Details, Read on…
Different methods are available to get the selected value from the Dropdown using JavaScript.
If you would like to use plain JQuery to get the selected item value, read How To Get The Selected Value From Dropdown List Using Jquery?
Let us look into it with JavaScript examples.
Table of Contents
Sample Select List
Consider the sample select list. The name is defined using the id
property.
- The options are added using the
option
tag. Each option has an attribute calledvalue
. This attribute is used to uniquely identify each item in the select list.
- You can add the option’s display value between the tags. This is the text value of the items in Dropdown list.
The list name is Gender.
You can use the selected
attribute if you want any value to be selected by default.
The selected attribute is used for the Male option in the example. Hence, the Male option will be selected by Default.
Code
<select id="Gender">
<option value="M" selected>Male</option>
<option value="F">Female</option>
<option value="O">Rather Not Say</option>
</select>
Now, you’ll learn the different methods to get the selected value from the Dropdown list.
Using Value Property
Each data element in the HTML DOM will have the attribute called Value.
It returns the domstring
representing the value of the element.
Code
To get the element’s value, you need to get the element from the DOM using the getElementById()
method. It’ll return the dom element reference of the passed element id
.
Then, using the dom element, use the .value
attribute to get the selected value of the element.
Code
var selectList = document.getElementById('Gender');
console.log(selectList.value);
You’ll see the value printed in the console.
Note: Value is the identifier that uniquely identifies the option in the Dropdown. It’s NOT the display value.
You’ll see ‘M’ printed in the console if the value Male is selected.
Output
M
Using Options and Index Property
In this section, you’ll use the selected index property in the options array and get the value using the .value
attribute.
This returns the option at the selected index and returns the value using the value
property.
Usually, this method is used to get a value at a specific index in the select list options. You can get the selected value from the dropdown list with the selected index.
Code
var value = selectList.options[selectList.selectedIndex].value;
console.log(value);
You’ll see the value printed in the console.
Note: Value is the identifier that uniquely identifies the option in the Dropdown. It’s NOT the display value.
You’ll see ‘M’ printed in the console if the value Male is selected.
Output
M
Using Selected Item Text in JavaScript
In this section, you’ll learn how to get the selected Item Text from the Dropdown in JavaScript.
You can use this to get the display value of the currently selected item.
You can get the text using the text attribute.
Code
The example demonstrates how to get the selected option using its index and get its text.
var txt = selectList.options[selectList.selectedIndex].text;
console.log(txt);
Output
Unlike the previous examples, you’ll see the display text of the selected item printed in the console.
Male
This is how you can get the text value of the selected item from the Dropdown using JavaScript.
Get Selected Value of Dropdown on Button Click
To get the selected value of a dropdown on Button click, you can call the method during the onclick event.
In the below example, the getSelectedValue()
method gets the element’s value and prints it in the console.
While creating a button, you can call this method during the onclick
event, as shown below.
Button Definition
<button type="button" onclick="getSelectedValue();">Get Selected Value</button>
Method to Get the Selected Value from Dropdown list
function getSelectedValue() {
var selectList = document.getElementById('Gender');
var value = selectList.options[selectList.selectedIndex].value;
console.log(value);
var txt = selectList.options[selectList.selectedIndex].text;
console.log(txt);
}
Get Selected Value of Dropdown onChange
To get the selected value of a dropdown during the selection change, you can call the method during the onchange event.
In the below example, when there is a change in the dropdown list selection, the logInConsole()
method gets the element’s value and prints it in the console.
While creating a Dropdown list, you can call the logInConsole()
method during the onchange
event, as shown below.
Dropdown Definition
<select id="Gender" onChange ="logInConsole()">
<option value="M" selected>Male</option>
<option value="F">Female</option>
<option value="O">Rather Not Say</option>
</select>
Method to Print the Selected Value during Change
function logInConsole() {
var selectList = document.getElementById('Gender');
var value = selectList.options[selectList.selectedIndex].value;
console.log(value);
var txt = selectList.options[selectList.selectedIndex].text;
console.log(txt);
}
This is how you can get the selected value from the Dropdown list using JavaScript.
JSfiddle
This tutorial is available in this JSFiddle.
Hi!
I am using the latest WAMP on a Win 11 64-bit Swe. I have previously used just “document.getElementById(‘Name’).value” to get a SELECT value and had no issue. Now ALERT shows “[object HTMLSelectElement]” instead and even “[object HTMLInputElement]” for DATE type input fields. The normal text input fields returns the correct values.
I have now tried the solution shown here, but there is no difference (javascript routine within PHP version 7.4.26:
var Riks = document.getElementById(‘Riks’);
var XRiks = options[document.getElementById(‘Riks’).selectedIndex].value;
The return is “Riks = [object HTMLSelectElement]” in ALERT.
Is the syntax incorrect or is there an issue with ALERT? I notice that “console” is used for output in these examples. Any help would be appreciated.