Is there any fast way to get an <option> from a <select> by value, using JavaScript?

Question

I have a <select>. Using JavaScript, I need to get a specific <option> from the list of options, and all I know is the value of the option. The option may or may not be selected.

Here's the catch: there are thousands of options and I need to do this a few hundred times in a loop. Right now I loop through the "options" array and look for the option I want. This is too slow (in the sense that on my very fast machine the browser locked up until I killed it after a few minutes).

Is there any faster way to do this? I'll take browser-specific ways, but of course a DOM-standard way would be nice.

Answer 1

With jQuery something like this could be faster:

$("#idselect option[value='yourval']")

http://docs.jquery.com/Selectors/attributeEquals#attributevalue

Answer 2

no there isn't, you are doing it really the best way possible. The only other thing you can try for maybe a quicker look up is to give each of the options an ID tag so that you can look them up as a DOM object instead of looping through children of a DOM object.

Answer 3

You could loop through all the options once and put all items into an associative array. Then you can just look for myOptions[valueImLookingFor].

I haven't tested this and can't guarantee it will be faster/better. But it should get rid of all those loops.

Depending on your setup and needs you could also generate a javascript array on the client side and put it in the markup instead of (or in addition to) the select.

Answer 4

I would suggest not having thousands of options in your select.

Perhaps you could structure your data differently a select with thousands of entries to me seems wrong.

Perhaps your app requires this but it would not be typical usage of this element.

Answer 5

My suggestion would be to look at a framework/toolkit like Dojo and its way of selecting DOM nodes.

The toolkit irons out alot of browser inconsistencies and allows you select and manipulate DOM nodes quickly and easily.

Answer 6

I'd do it like this:

// first, build a reverse lookup
var optCount      = mySelect.options.length;
var reverseLookup = {};
for (var i = 0; i < optCount; i++)
{
  var option = mySelect.options[i];
  if (!reverseLookup[option.value])
  {
    // use an array to account for multiple options with the same value
    reverseLookup[option.value] = [];
  }
  // store a reference to the DOM element
  reverseLookup[option.value].push(option);
}

// then, use it to find the option
var foundOptions = reverseLookup["Value that you are looking for"];
if (foundOptions && foundOptions.length)
{
  alert(foundOptions[0].id);
}

Answer 7

I would think that it may be an indicator that "thousands" of items in a select probably isn't the best user experience. Maybe you should consider trying to limit your dropdowns to several that narrow the results as a user selects them.

Answer 8

This is Tomalak's answer with a minor speed tweak. You see a while loop that iterates down is faster than a for loop that iterates up. (I'm lazy so I won't provide the link.)

var i = mySelect.options.length - 1;
var reverseLookup = {};
while ( i >= 0 )
{
  var option = mySelect.options[i];
  if (!reverseLookup[option.value])
  {
    // use an array to account for multiple options with the same value
    reverseLookup[option.value] = [];
  }
  // store a reference to the DOM element
  reverseLookup[option.value].push(option);
  i--;
}

// then, use it to find the option
var foundOptions = reverseLookup["Value that you are looking for"];
if (foundOptions && foundOptions.length)
{
  alert(foundOptions[0].id);
}