Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to get selected option from Dropdown in jQuery ?

  • Difficulty Level : Basic
  • Last Updated : 19 Sep, 2021

In this article, we learn how to get the selected option from the dropdown list. This article requires some familiarity with HTML, CSS, JavaScript, and jQuery. We can solve this challenge by using the jQuery val() method.

The val() method in jQuery is used to set or return the value of an attribute for the selected elements. This method applies to the HTML form elements.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

$(selector).val()   // or
$(selector).val(value)  // or
$(selector).val(function(index, current_value))

This method returns the selected element with specified changes made by val() method.



 

Example:

HTML




<html>
  
<head>
    <title>
        How to get selected option from 
        Dropdown list using jQuery?
    </title>
  
    <link href=
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
  
    <script src=
    </script>
</head>
  
<body style="border: 2px solid green; min-height: 240px;">
    <div style="display: flex; justify-content: center;">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
    </div>
  
    <select class="form-select mx-auto" 
        aria-label="Default select example" 
        style="width: 200px; margin-top: 20px;"
        id="lang">
          
        <option selected>Select Language</option>
        <option>C</option>
        <option>Java</option>
        <option>Python</option>
    </select>
  
    <div id="show" style="display: flex;
        justify-content: center; margin-top: 20px;">
    </div>
</body>
  
<script>
    $('#lang').on('input', function () {
        $('#show').text($('#lang').val());
    })
</script>
  
</html>

Output:

output

How does it work?

Whenever you select an item from the dropdown, it will show below the dropdown at the same time.




My Personal Notes arrow_drop_up
Recommended Articles
Page :