jQuery Tutorial

jQuery Examples

jQuery Practice

Get selected text from a drop-down list (select box) using jQuery

Here, we'll see how to get the selected text (not the selected value) from a drop-down list using jQuery?
Submitted by Pratishtha Saxena, on May 28, 2022

With jQuery, it's easy to get selected text from a drop-down list with :selected. This is done using the select id. The option:selected method is a way in jQuery which is used to return the selected element from a list of the element. No parameters are required for this.


$("#selector option:selected");

Note: Always make sure to include the jQuery CDN link in the script tag whenever working with jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

First, we'll create a drop-down list using an HTML select tag and add options to it with some values (here – 1,2). The text here is Hindi, and English. Also, a button is specified which when clicked will alert the text of the option selected.

To get the text of the selected value, we'll create a function that will alert and display the selected text.


HTML Code:

         <p>Select Value:</p>
         <select id="myselection">
            <option value="1">Hindi</option>
            <option value="2">English</option>
         <button id="submit">Submit</button>

jQuery Function:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    $(document).ready(function() {
        $("#submit").click(function() {
            var value = $("#myselection option:selected");


Example: Get selected text from a drop-down list

Comments and Discussions!

Load comments ↻

Copyright © 2024 www.includehelp.com. All rights reserved.