Getting select option text based on value

Question

I have a menu. Given a given value, I would like to return the text. For instance, 0 would return “zero”, 1 would return “one”, etc. Note that I do not care which option is currently selected nor do I want to auto-select the menu, but just want to use the select menu as a primitive database. Can this be done easily with JavaScript or jQuery without iterating over each option?

<select> <option value="0">zero</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select>

Thanks

Use the "selected:" selector (api.jquery.com/selected-selector) — ckaufman
– ckaufman, Commented Apr 10, 2012 at 20:40

user1106925 · Accepted Answer · 2012-04-10 20:39:42Z

Instead of using the select as a database (requiring an expensive operation for simple lookups), create a data set from it once, then use that...

var vals = $('select option').map(function(i, el) { return el.text; }) .toArray(); alert(vals[2]); // "two"

Or if the option values aren't sequential 0 based indices, then use an object...

var vals = {}; $('select option').each(function(i, el) { vals[el.value] = el.text }); alert(vals[2]); // "two"

I was also planning on a similar approach. Maybe the first time the data is needed, create the variable.
+1. Though I don't think iterating 10 or even 100 options is expensive operation in our days. It just don't worth the time. Am I right?
@gdoron: You're right. I was thinking more of the DOM selection being an unnecessarily expensive way to store and fetch values.

Darin Dimitrov · Accepted Answer · 2012-04-10 20:35:35Z

var value = '3'; alert($('select option[value=' + value + ']').text());

Live demo.

Also you might want to give the select an id and update the selector because if you have multiple dropdown lists the selector won't work:

alert($('#id_of_the_select option[value=' + value + ']').text());

I don't know if the OP is interested in which value is currently selected. He wants to get the text given a value. Or maybe I misunderstood the question.
This does not return the text after selecting another option

Niet the Dark Absol · Accepted Answer · 2012-04-10 20:36:53Z

How else would you scan for a value without iterating over each option? There's no magic property that does it for you.

However, you can use this code:

(function() { var sels = document.getElementsByTagName('select'), l = sels.length, i, opts, m, j, o; for( i=0; i<l; i++) { o = {}; opts = sels[i].options; m = opts.length; for( j=0; j<m; j++) o[opts[j].value] = opts[j].text; sels[i].map = o; } })();

Put that just before </body>, and now you can find the map of any <select> on your page:

var sel = document.getElementById('mySelect'); alert(sel['0']);

btw, this is hundreds of times more efficient than any jQuery solution, just so you know ;)
Yea, bet it is way more efficient. Probably keep with a jQuery solution for now, and later change everything after prototyping and going to production use.

David Thomas · Accepted Answer · 2012-04-10 20:46:02Z

Use the attribute-equals selector:

var valToSearchFor = 0; textFromOption = $('select option[value="' + valToSearchFor + '"]').text();

This will still iterate over every option to test for the presence of the value you're looking for, but it will do so 'behind the scenes' so that you don't have to.

There's the possibility of using querySelectorAll() (albeit with more or less the same notation as the above jQuery):

var valToSearchFor = 0; textFromOption = document.querySelectorAll('option[value="' + valToSearchFor + '"]').innerHTML;

This, of course, requires that the browser implements querySelectorAll(), and not all do (IE particularly).

References:

In your demo you set the value of an element to 4 and then try to retrieve the text of an element whose value is equal to 3. Which doesn't exist. If you amend your demo to find an element with a value that exists, it works.
No worries, I'm just somewhat embarrassed it took me so long to realise... =D

ckaufman · Accepted Answer · 2012-04-11 01:18:58Z

Use the selected: Selector. Example given right on the page.

http://api.jquery.com/selected-selector/

 $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }) .trigger('change');

Replace the "div" with the event you are trying to trigger

http://jsfiddle.net/ckaufman/aDU5E/1/

Updated the example with your Option menu so you can see it in action. jsfiddle.net/ckaufman/aDU5E/1

Collectives™ on Stack Overflow

Getting select option text based on value

5 Answers 5

3 Comments

2 Comments

2 Comments

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

2 Comments

2 Comments

2 Comments

Related