How To Get The Selected Value From Dropdown List using Javascript – Definitive Guide?

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.

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 called value. 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.

Additional Resources

1 thought on “How To Get The Selected Value From Dropdown List using Javascript – Definitive Guide?”

  1. 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.

    Reply

Leave a Comment