How to Get Selected Text from a Select Box in jQuery

By the end of this page, you will understand how to read the visible text of the currently selected <option> in a jQuery <select> element. You will also learn the difference between option text and option value, how to react to selection changes, and how this pattern is used in real projects.

In HTML, a drop-down list is usually created with a <select> element that contains one or more <option> elements.

Each <option> can have:

• a value: the data sent or stored internally
• a text label: the human-readable text shown to the user

For example:

<select id="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

Here:

• us and ca are the values
• United States and Canada are the visible text labels

In jQuery, beginners often use .val() first. That works when you want the selected value, but not when you want the displayed text.

To get the selected text, you target the selected <option> and then read its text:

$('#country option:selected').text()

This matters because real applications often need both:

• the value for saving to a database or sending to an API
• the text for display in messages, summaries, or previews

Understanding this difference helps you avoid bugs like showing us to a user when you meant to show United States.

Think of a <select> like a menu in a restaurant:

• the value is the kitchen's internal item code
• the text is the name printed on the menu

A user sees "Canada", but your code might store "ca".

If you ask for .val(), you get the internal code. If you ask for the selected option's .text(), you get what the user actually sees.

The basic jQuery syntax is:

$('#mySelect option:selected').text()

Example HTML

<select id="fruit">
  <option value="ap">Apple</option>
  <option value="ba">Banana</option>
  <option value="or">Orange</option>
</select>

Get the selected text

var selectedText = $('#fruit option:selected').text();
console.log(selectedText);

If Banana is selected, the result is:

Banana

Compare with selected value

var selectedValue = $('#fruit').val();
var selectedText = $('#fruit option:selected').text();

console.log(selectedValue); // ba
console.log(selectedText);  // Banana

React when the user changes the selection

$('#fruit').change(function () {
  var text = $('#fruit option:selected').text();
  console.log('You selected: ' + text);
});

This is useful when you want to update the page immediately after the user picks an item.

Consider this example:

<select id="city">
  <option value="ny">New York</option>
  <option value="ldn">London</option>
  <option value="tky">Tokyo</option>
</select>

var selectedText = $('#city option:selected').text();
console.log(selectedText);

Step by step

1. $('#city option:selected')

   • jQuery finds the element with id="city".
   • Inside that <select>, it looks for the currently selected <option>.

2. .text()

   • jQuery reads the text content of that selected <option>.

3. var selectedText = ...

   • The result is stored in the variable selectedText.

4. console.log(selectedText)

   • The text is printed to the console.

Example trace

If the HTML is currently:

<option value="ldn" selected>London</option>

Then:

• selected option = London
• .val() would return ldn
• .text() returns London

So the console output becomes:

London

Getting selected text is useful in many practical situations:

• Confirmation messages
  • Show: You selected: Canada
• Order summaries
  • Display the product name the user picked
• Profile settings pages
  • Show a readable label instead of an internal code
• Dynamic UI updates
  • Update headings, previews, or descriptions based on the selected option
• Form review screens
  • Show user-friendly text before final submission
• Reporting and exports
  • Use readable labels for generated summaries

Example: update a preview area

$('#fruit').change(function () {
  var selectedText = $('#fruit option:selected').text();
  $('#preview').text('Selected fruit: ' + selectedText);
});

This keeps the interface readable for users.

In real projects, developers usually do more than just read the text once.

Common patterns

• Event-driven updates
  • Read selected text inside a .change() handler
• Guard clauses
  • Check whether a valid option is selected before using the text
• Display + submit split
  • Use .val() for backend data and .text() for frontend display
• Form validation
  • Ignore placeholder options such as Select one
• Reusable helpers
  • Wrap the logic in a small function for repeated use

Example with a guard clause

$('#country').change(function () {
  var value = $(this).val();
  var text = $(this).find('option:selected').text();

  if (!value) {
    $('#message').text('Please choose a country.');
    return;
  }

  $('#message').text('Selected country: ' + text);
});

Reusable helper example

function getSelectedText(selector) {
  return $(selector).find('option:selected').text();
}

var text = getSelectedText('#country');
console.log(text);

This approach makes code easier to reuse and maintain.

1. Using .val() when you need visible text

Broken example:

var text = $('#fruit').val();
console.log(text);

This returns the option's value, not its label.

Correct version:

var text = $('#fruit option:selected').text();

2. Forgetting to target the selected option

Broken example:

var text = $('#fruit option').text();

This may return the combined text of all options.

Correct version:

var text = $('#fruit option:selected').text();

3. Using the wrong selector inside an event handler

Less ideal:

$('#fruit').change(function () {
  var text = $('#fruit option:selected').text();
});

Better:

$('#fruit').change(function () {
  var text = $(this).find('option:selected').text();
});

Using $(this) is cleaner and works better if multiple selects use the same handler.

4. Not handling placeholder options

Example:

<select id="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
</select>

If the first option is selected, .text() returns Select a country.

Avoid mistakes by checking the value too:

var value = $('#country').val();
var text = $('#country option:selected').text();

if (!value) {
  console.log('No real selection yet');
}

5. Assuming text and value are always different

Sometimes they are the same:

<option value="Apple">Apple</option>

In that case, .val() and .text() produce the same result. But do not rely on that unless your HTML is designed that way.

.val() vs .text()

Two common ways to get selected text

$('#fruit option:selected').text()

$('#fruit').find('option:selected').text()

These are effectively equivalent. The second version is often easier to reuse inside event handlers:

$('#fruit').change(function () {
  var text = $(this).find('option:selected').text();
});

Get selected text

$('#mySelect option:selected').text()

Get selected value

$('#mySelect').val()

Best pattern inside change()

$('#mySelect').change(function () {
  var value = $(this).val();
  var text = $(this).find('option:selected').text();
});

Key rule

• Use .val() for the option's value
• Use .text() for the visible label

Common selector

option:selected

Placeholder edge case

If the selected option is:

<option value="">Select one</option>

Then:

• .val() returns ""
• .text() returns "Select one"

Reusable helper

function getSelectedText(selector) {
  return $(selector).find('option:selected').text();
}

How do I get the selected text of a dropdown in jQuery?

Use:

$('#mySelect option:selected').text()

What is the difference between .val() and .text() in a select box?

• .val() returns the selected option's value
• .text() returns the visible text label

Can I get selected text inside a change event?

Yes:

$('#mySelect').change(function () {
  var text = $(this).find('option:selected').text();
});

Why does my code return the option value instead of the label?

You are probably using .val(). Use .text() on the selected <option> instead.

Does this work for all select boxes in jQuery?

Yes, as long as the element is a normal HTML <select> and you select the current <option> correctly.

What happens if no real option is selected?

If a placeholder option is selected, .text() returns the placeholder text. Check .val() as well if you need to detect an empty selection.

• select element — The HTML form control that contains options.
• option element — The child element whose text and value you read.
• jQuery selectors — Needed to target the select and the selected option.
• .val() — Used to get the selected value instead of the text.
• .text() — Used to read visible text from an element.
• change event — Commonly used to run code when the user changes the dropdown selection.
• form handling — Dropdown selection is a common part of working with forms.
• DOM manipulation — Often used after reading selected text to update the page.