Jquery get specific option tag text

javascript

jquery-selectors

javascript-dom

event-handling

byAlex Kataev·Feb 27, 2025

To extract the text from specific option elements in a select box with jQuery, we will employ the .text() method. If we're after the text of the currently selected option:

var selectedOptionText = $('#yourSelectBox').find('option:selected').text();
console.log("You've chosen:", selectedOptionText);

When hunting for the text based upon the option's position with zero-based indexing:

var indexedOptionText = $('#yourSelectBox option').eq(1).text(); // index 1 targets the second option.
console.log("Eeny, meeny, miny, moe. You selected:", indexedOptionText);

That's the express route to securing your option text.

Working with jQuery selectors

Getting option text by value

If you know the value assigned to your option, here is your secret formula:

var textByValue = $('#yourSelectBox option[value="desired_value"]').text();
console.log("Using the value key, we unlock:", textByValue);

Just remember to swap 'desired_value' with the actual value of the option you're looking for.

Selector pitfalls you must dodge

Avoid using incorrect selectors like $('#yourSelectBox[value="desired_value"]').text(). They may resemble the good ones, but they are wolves in sheep's clothing. They target the select box and not options. Tricky, right?

Handling selection changes like a boss

To get text from the option that's been selected during a change, point a listener to reckon with the change event:

$('#yourSelectBox').on('change', function() {
    var dynamicOptionText = $(this).find('option:selected').text();
    console.log("Change is constant. Now you picked:", dynamicOptionText);
});

Troubleshooting 101

Cross-check your jQuery selectors to ensure they match your HTML elements like lost twins.
Is anything out of sorts? Inspect the DOM and debug where necessary using your trusty developer tools.
Got cross-browser woes? Remember, jQuery is your friend. It has uniform behavior across most browsers.

A ride through jQuery methods

A layman's `val()` vs `text()`

.val() is your discreet agent that fetches the value attribute, while .text() takes up the megaphone to announce the text content of an option.

Fine-tuning your search with .find()

Sometimes, you just need to prune your methods a bit. A case is when removing "option" from .find() can soothe those nasty conflicts:

var text = $('#yourSelectBox').find('[value="2"]').text();
console.log("Going discreet with find:", text);

More ways to boss text extraction

Double-check those element IDs

Make sure the ID in your selector is identical to your <select> element's ID. It's the key to your lock, not its DIY twin.

The power of ':selected'

At times, all you need is the text of the current selected option:

var currentText = $('#yourSelectBox').find(':selected').text();
console.log("Who's riding in the hot seat now? It's:", currentText);

This keyword matters, oh yes it does

Let's say you're dealing with an event handler. In this context, your useful friend this refers to the element that triggered the event. Translation:

$('#yourSelectBox').on('change', function() {
    var inContextText = $(this).find('option:selected').text();
    console.log("Current champ in the select box ring is:", inContextText);
});