Retrieving the text of the selected `<option>` in `<select>` element

javascript

prompt-engineering

functions

callbacks

byAlex Kataev·Nov 10, 2024

For a quick slice of the cake, use this:

var selectedText = document.querySelector('select').selectedOptions[0].text;

This usable snippet does a simple job — it fetches the visible text of the chosen <option> within the first <select> element of your page.

Multiple pathways to Rome

We all know that Rome wasn't built in a day and neither is your foolproof way to snag the selected option's text. Here are a few methods, each with its own charm, in the world of JavaScript and beyond:

The Vanilla JS Pathway

For the hardcore coders no chaser, here's a function using good old getElementById:

function getSelectedText(elementId) {
  var elt = document.getElementById(elementId);
  if (elt.selectedIndex == -1)
      return null; // Well, you didn't pick anything, did you?
  return elt.options[elt.selectedIndex].text;
}

Usage:

var text = getSelectedText('selectId'); // 'selectId' is your <select> element's catwalk name

The jQuery Pathway

For jQuery devotees, $("#selectId option:selected").text() will work like that extra shot of espresso in your latte.

Recent coders (we don't do age shaming here) are leaning towards the trendy selectedOptions. But keep in mind, not all browsers are happy campers, especially when Internet Explorer gatecrashes the party.

For such cases, make sure your compass directs you towards options[selectedIndex].

Overflowing a river: Comprehensive coverage

Handling the "None-picked" scenario

There could be times when your users decide to play hard-to-get and choose nothing. Your function should be a resilient variant here, returning null to thwart any lurking errors.

Dealing with multiple guys, I mean selects!

Just like in a rom-com, your webpage may be juggling multiple <select> elements. Shipping the elementId to the function secures you're courting the correct suitor.

Taming the browser beasts

Browsers have different backstories and they seldom maintain a united front. Swear by the MDN documentation for cross-platform compatibility. Stay ready for that odd browser that just loves to be the exception.

Cherry on top with jQuery

The sweet magic potion $("#selectId").val() fetches the value and $("#selectId option:selected").html() extracts the text content when jQuery is the sorcerer of choice. But keep an eye out for .html(). It might surprise you with — HTML tags!