Is there a quick way to get <option> from <select> by value using JavaScript?

Question

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

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

Is there a faster way to do this? I will use browser-specific methods, but, of course, the DOM-standard method will be nice.

Answer 1

I would 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 2

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

Perhaps you could structure your data in different ways, the choice with thousands of records seems to me wrong.

Your application may require this, but that would not be a typical use of this element.

Answer 3

This is Tomalak's answer with a slight speed setting. You see a while loop that iterates down, faster than a for loop that iterates. (I am lazy, so I will not provide a 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); } 

Answer 4

no, no, you do it really well. The only thing you can try, possibly a faster search, is to give each of the options an identifier tag so that you can search for them as a DOM object, rather than iterating through the child objects of the DOM object.

Answer 5

You can skip all parameters once and put all elements in an associative array. Then you can just search myOptions[valueImLookingFor] .

I have not tested this and cannot guarantee that it will be faster / better. But he must get rid of all these cycles.

Depending on your settings and needs, you can also create a client-side javascript array and put it in the markup instead (or in addition) to the selection.

Answer 6

My suggestion is to look at a framework / toolkit like Dojo and its way to select DOM nodes .

The toolkit removes a lot of browser inconsistency and allows you to quickly and easily select and manipulate DOM nodes.

Answer 7

I would think that this could be an indicator that the “thousands” of items in the list are probably not the best user interface. Perhaps you should try to limit the drop-down lists to a few that narrow the results when the user selects them.

Answer 8

With jQuery, something like this might be faster:

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

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