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

Published on: | Last updated on: November 2, 2022 | By:

A dropdown list allows users to select a value from the List of Values.

You can get the selected value from Dropdown list using JQuery using $(“#dropdownid”).val() snippet.

In this tutorial, you’ll learn how to get the selected value from the Dropdown list using JQuery.

If You’re in Hurry…

You can use the val() function to get the element’s value. The val() function returns the selected value. There is no need to specify any other attribute to get the selected value.

Code

var selectList = $(“#dropdownid”).val();

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

If you would like to use plain Javascript to get the selected item value, read How To Get The Selected Value From Dropdown List Using Javascript.

Let us look into it with JQuery examples.

Adding JQuery Reference

Add the below reference to the Jquery script.

Otherwise, you’ll get an Uncaught ReferenceError: $ is not defined error when accessing the elements using $.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

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 identify each item in the select list uniquely.
  • You can add the option’s display value between the tags. This is the text value of the items in the 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 Val function

You can use the val function to get the value of the first matched element.

Code

To get the element’s value, you directly refer to the element name using its id and invoke the val() function.

Code

var selectList = $(“#gender”).val();

 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

Get Selected Item Text in JQuery

You can get the selected item text in JQuery using the text() method.

It returns the text of the matched element.

To get the text of the currently selected value, use the :selected attribute.

The option:selected attribute returns the currently selected element from the dropdown, and the text() method gets the text of that element.

Code

var value = $('#Gender :selected').text();

console.log(value);

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 value = $('#Gender :selected').text();

console.log(value);
}

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 value = $('#Gender :selected').text();
console.log(value);
}

This is how you can get the selected value from the Dropdown list using JQuery.

JSfiddle

This tutorial is available in this JSFiddle.

Additional Resources

Leave a Comment