jQuery Tutorial

jQuery Examples

jQuery Practice

JQuery MCQs

How to get selected value of a dropdown's item using jQuery?

Learn, how can we get the value of a selected option from the given drop-down list using jQuery?
Submitted by Pratishtha Saxena, on March 07, 2023

Getting the selected value of a dropdown's item

Firstly, let's get a clearer vision of the drop-down value and drop-down text. Value is an attribute of an element that is given when that element is declared. Its value can be useful in various other operations for specifying the element. On the other hand, the Text of an element is the content that the element holds. The text is what is visible on the web page to the users.

Now, over here we are discussing ways to access the value of the selected option from the drop-down menu. When the drop-down options are created, the value attribute can be defined. Hence, to access that value of an element, we have a jQuery method called the val() method.

jQuery val() Method

The val() method helps to get the value of the selected element. The element is specified by using the selector and following it the val() method is executed. It then returns the value specified for that element. Since majorly the value attribute is used for a form input field or for a select tag, hence, the val() method is also used for those elements only.

Syntax

$(selector).val();

This is a very simple method and does not take any parameters for returning the value of the selected element in jQuery. This method is one of the widely used methods in jQuery. It is useful for various other tasks as required.

The example below shows the implementation of this method. When an option is selected from the drop-down menu, by clicking the given button, you can get to know the value of the selected option.

jQuery example to get selected value of a dropdown's item

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>Get selected value of a dropdown's item using jQuery</h2>
    <h4>Click the button to get the VALUE of the selected option.</h4>
    <button>Get VALUE</button>
    <hr>
    <p>Select Language :-</p>
    <select id="myselection">
      <option value="0">--Select--</option>
      <option value="1">Hindi</option>
      <option value="2">English</option>
      <option value="3">Punjabi</option>
      <option value="5">Marathi</option>
      <option value="6">Malayalam</option>
      <option value="7">Gujrati</option>
    </select>
    <h4 id="one"></h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $("button").click(function() {
            var option = $("#myselection option:selected");
            $('h4#one').html('Value of ' + option.text() + ' language is : ' + option.val());
        });
    });
  </script>  
</html>

Output:

Example: How to get selected value of a dropdown's item using jQuery?

Convert UTC date time to local date time using jQuery

How to detect DIV's dimension changed using jQuery?

Comments and Discussions!

Load comments ↻