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:

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

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>.

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();
    ;
  }

  $().( + text);
});

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( () {
   text = $().();
});

.val() vs .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

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?

• 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.