jQuery: how to get text from a dropdown list (select) — full breakdown

Have you ever caught yourself thinking: "Why am I getting the value, but I need the text?"

Welcome to PythonLib! Today we will break down one of the most popular problems faced by both beginners and experienced frontend developers. You create a beautiful form, add a dropdown list (select box), write a jQuery handler... and suddenly realize you need not the value (a numeric country code, product ID, or something similar), but the human-readable text that the user sees in the menu.

This question on Stack Overflow has gathered thousands of views and dozens of answers. We won't just copy one of them — we will break the task down step by step, show several solution approaches, and provide ready-made code you can insert into your project right now. Let's go!

The Problem: value vs. text

Imagine a typical HTML code:

<select id="citySelect">\n    <option value="1">Moscow</option>\n    <option value="2">Saint Petersburg</option>\n    <option value="3">Novosibirsk</option>\n</select>

When a user selects "Saint Petersburg", the standard jQuery code $('#citySelect').val() will return "2". But what if you need to display exactly "Saint Petersburg" on the page? Or send a readable name to analytics? That's where the magic of DOM navigation begins.

Solution #1: the classic approach with .text()

The simplest and most intuitive way is to get the selected <option> element, and then extract its text content.

$('#citySelect').on('change', function() {\n    var selectedText = $(this).find('option:selected').text();\n    console.log('You selected:', selectedText);\n});

How does it work?
\n$(this) — a reference to our select (inside the event handler).
\n.find('option:selected') — search among child options for the one with the selected attribute.
\n.text() — extract the plain text (without HTML tags).

Bonus: if you have multiple selects on the page, use a class or ID instead of this.

Solution #2: using .children() and .filter()

Sometimes it's more convenient to work by filtering child elements. Especially if you have complex nesting or custom tags.

$('#citySelect').on('change', function() {\n    var selectedText = $(this).children('option:selected').text();\n    // Alternative with filter:\n    // var selectedText = $(this).children('option').filter(':selected').text();\n    alert('Selected city: ' + selectedText);\n});

The difference between find() and children() is that children() only looks at direct descendants, while find() looks at all descendants at any level. For a standard select this doesn't matter, but it's good to know.

Solution #3: getting the text on page load

Often you need to show the selected text immediately, without waiting for a change event. For example, when initializing a form.

$(document).ready(function() {\n    var initialText = $('#citySelect option:selected').text();\n    $('#selectedCityDisplay').text('Current city: ' + initialText);\n});

This code will execute once when the DOM loads and write the text of the default selected option into the element with ID selectedCityDisplay.

Solution #4: a universal helper function

If you are building a serious application, it makes sense to extract the logic into a separate function. This makes the code cleaner and reusable.

function getSelectedText(selectId) {\n    return $('#' + selectId + ' option:selected').text();\n}\n\n// Usage:\n$('#citySelect').on('change', function() {\n    var text = getSelectedText('citySelect');\n    co