有什么快速的方法可以使用JavaScript从中获取 ?

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.

我有一个 <选择> 。使用JavaScript，我需要从选项列表中获得一个特定的 <选项> ，我只知道选项的值。选项可以选择，也可以不选择。

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).

这里有一个问题:有成千上万个选项，我需要在一个循环中做几百次。现在我循环遍历“options”数组并查找我想要的选项。这太慢了(在我速度很快的机器上，浏览器被锁起来，几分钟后我就把它关掉了)。

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

有更快的方法吗?我将采用特定于浏览器的方式，但当然，使用dom标准的方式比较好。

8 个解决方案

#1

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);
}

#2

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.

也许你的应用需要这个，但它不是这个元素的典型用法。

#3

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.)

这是托玛拉克的回答，稍微调整一下速度。您可以看到，迭代的while循环比迭代的for循环要快。(我很懒，所以不提供链接。)

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);
}

#4

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.

不，没有，你用的是最好的方法。另一种方法是给每个选项一个ID标记，这样就可以将它们作为DOM对象查找，而不是通过DOM对象的子对象进行循环。

#5

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

您可以对所有选项循环一次，并将所有项放入关联数组中。然后你可以只查找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.

根据您的设置和需要，您还可以在客户端生成一个javascript数组，并将其放在标记中，而不是(或添加)选择。

#6

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

我的建议是看一个像Dojo这样的框架/工具包，以及它选择DOM节点的方式。

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

该工具包消除了大量浏览器的不一致性，允许您快速、轻松地选择和操作DOM节点。

#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.

我认为它可能是一个指示器，“成千上万”的选择可能不是最好的用户体验。也许你应该考虑将你的下拉列表限制在几个，以便在用户选择的时候缩小结果。

#8

-1

With jQuery something like this could be faster:

使用jQuery这样的工具可以更快:

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

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

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

#1