How to get text value of a selected option in jQuery ?

Last Updated : 25 Aug, 2021

Introduction: In this article, we will see how we can use jQuery to get the text value from the selected option. While working on some form-related user interface, we often use the select option, and to use that, we will surely need those values that are being selected.

Approach: We will use select option is a very easy method to make a drop-down menu and the val() method that is an inbuilt method in jQuery which is used to returns or set the value of attribute for the selected elements. This method apply on the HTML form elements.

Syntax:

$(selector).val(parameter)

Parameters: This method does not accepts any parameters.

jQuery CDN Link: Add the following code in the head tag of the HTML file.

<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>

Example: In this example, we will make a select option element and print values on the browser console that is getting selected by the user using val() method as described above.

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity= 
    "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <select id="selectVal"> 
        <option value="1">One</option> 
        <option value="2">Two</option> 
        <option value="3">Three</option> 
        <option value="4">Four</option> 
        <option value="5">Five</option> 
    </select> 
  
    <script> 
  
        // It will print the selected value 
        function displayNum() { 
            console.log($("select#selectVal").val()); 
        } 
  
        // When the selected value will change, 
        // the above function is called 
        $("select#selectVal").change(displayNum); 
    </script> 
</body> 
  
</html> 