How to get text of specific option tag using jQuery?

In order to select the text of a selected option or any specific option, jQuery allows doing that easily by its specific selectors. The selector is used to select the specific element.

Example: This example selects the text of the specific option(GFG_2) tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>  
<html>  
  
<head
    <title
        Get text of specific option tag
    </title>
      
    <script src=
    </script>
</head
         
<body style = "text-align:center;">  
     
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1>  
   
    <select id='GFG_list'>
        <option value='GFG_1'>GFG_A</option>
        <option value='GFG_2'>GFG_B</option>
        <option value='GFG_3'>GFG_C</option>
    </select>
      
    <br><br>
      
    <button id="GFG_Button" onclick = "getText()">
        getText
    </button
      
    <p id = "GFG_P" style="color:green;font-size:20px;"></p>
      
    <script>
        function getText(){
            var el = document.getElementById("GFG_P");
            el.innerHTML = $("#GFG_list option[value='GFG_2']").text();
        }
    </script
</body>  
  
</html>  

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example: This example selects the text of currently selected option tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>  
<html>  
  
<head
    <title
        Get text of specific option tag
    </title>
      
    <script src=
    </script>
</head
         
<body style = "text-align:center;">  
     
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1>  
   
    <select id='GFG_list'>
        <option value='GFG_1'>GFG_A</option>
        <option value='GFG_2'>GFG_B</option>
        <option value='GFG_3'>GFG_C</option>
    </select>
      
    <br><br>
      
    <button id="GFG_Button" onclick = "getText()">
        getText
    </button
      
    <p id = "GFG_P" style = "color:green; font-size: 20px;"></p>
      
    <script>
        function getText(){
            var el = document.getElementById("GFG_P");
            el.innerHTML = $("#GFG_list option:selected").text();
        }
    </script
</body>  
  
</html

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.