Get SELECT dropdown list Selected text using JavaScript and jQuery

There are few easy ways to get the selected text of a SELECT dropdown list dynamically using JavaScript and jQuery. The selected text of a SELECT element may be different (or similar) from the value of the element. Therefore, there are different methods to extract the text or the value of a SELECT element.

Using JavaScript to get the Selected texts of SELECT Element

The first example here shows how to get the selected text (also the selected value) from the SELECT element, using plain JavaScript.

Remember, every SELECT dropdown list element will have a list of texts (the options that are visible on the web page) and a value with each text, which remains hidden. The methods to extract both the text and value are different in both JavaScript and jQuery.

<html>
<head>
    <title>Get Selected Text  of SELECT Element using JavaScript</title>
    <style>
    	select, p {
        	font: 1em Calibri;
        }
    </style>
</head>
<body>
    <select id="sel" onchange="selectText(this)">
        <option value="">-- Select --</option>
        <option value="001">Hairy Woodpecker</option>
        <option value="002">Brewer's Sparrow</option>
        <option value="003">White-tailed Hawk</option>
    </select>
    
    <p id='msg'>
    
    </p>
</body>
<script>
    let selectText = (ele) => {
    	let msg = document.getElementById('msg');
        msg.innerHTML = 'Selected Text: <b>' + ele.options[ele.selectedIndex].text + '</b> </br>' +
            'Value of the Selected Text: <b>' + ele.value + '</b>';
    }
</script>
</html>

Try it

In the above example, the text (also known as options) in the drop-down list, is the name of a Bird and the value is a code. To get the selected text (or the selected option), I am using the text() method of the options collection.

ele.options[ele.selectedIndex].text

Using jQuery to get the Selected texts of SELECT Element

The jQuery method is also simple.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Get Selected Text  of SELECT Element using jQuery</title>

    <style>
    	select, p {
        	font: 1em Calibri;
        }
    </style>
</head>
<body>
    <p>jQuery example: Get the selected text of this SELECT element!</p>

    <select id="sel">
        <option value="">-- Select --</option>
        <option value="001">Hairy Woodpecker</option>
        <option value="002">Brewer's Sparrow</option>
        <option value="003">White-tailed Hawk</option>
    </select>
    
    <p id='msg'>
        </p>
</body>
<script>
    $(document).ready(function () {
        $('#sel').change(function () {
            $('#msg').html('Selected Text: <b> ' + $(' :selected').text() + '</b> </br >' +
            	 'Value of the Selected Text: <b>' + $(' :selected').val() + '</b>');
        });
    });
</script>
</html>

Try it

Did you notice the :selected Selector in the above example? The jQuery :selected selector returns the selected option. It works only with a SELECT dropdown list element. Using the text() method with the Selector, I can easily get the selected text.

As I said before in the article, the value and texts of a SELECT element may be different or similar. However, the methods to extract the values are different.

Now, in the above jQuery example, since I have used the .change() function to extract the values, I have only used the selector along with the method text(). You can, however explicitly add the element’s id before the selector.

$('#sel :selected').text();

Look at it carefully. There is a space between id and :selected. Be careful with this.

← PreviousNext →