blocks|key|2371186|text|假设这些值是唯一的，您可以走捷径。例如，一旦你找到了一个值，你就可以通过从搜索数组中splice()它来停止搜索它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2371187|不过，这将是最终的优化，将您从O(n%5E2)一直带到O(n+log+n)：排序。|2371188|首先，遍历选项并构建一个数组。基本上，您只需要将NodeList转换为数组。然后，使用回调对数组执行sort操作，以获取选项的值。对搜索数组进行排序。现在，您可以遍历"options“数组并查找当前最小的搜索项。|2371189|var+optsNodeList+=+document.getElementById('foobar').options,
++++optsArray+=+[],+l+=+optsNodeList.length,+i,
++++searchArray+=+[2,3],+matches+=+[],+misses+=+[];
for(+i=0;+i<l;+i%2B%2B)+optsArray[i]+=+optsNodeList[i];
optsArray.sort(function(a,b)+{return+a.value+<+b.value+?+-1+:+1;});
searchArray.sort();
while(searchArray[0]+&&+(i+=+optsArray.shift()))+{
++++while(+i+>+searchArray[0])+{
++++++++misses.push(searchArray.shift());
++++}
++++if(+i+==+searchArray[0])+{
++++++++matches.push(i);
++++++++searchArray.shift();
++++}
}|code-block|syntax|javascript|2371190|entityMap^0|16|8|0|F|6|P|A|0|1E|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

Assuming the values are unique, you can take some shortcuts. For instance, once you have found a value you can stop searching for it by <code>splice()</code>ing it off the search array.

This would be the ultimate optimisation, though, taking you from <code>O(n^2)</code> all the way down to <code>O(n log n)</code>: Sorting.

First, loop through the options and build an array. Basically you just want to convert the NodeList to an Array. Then, <code>sort</code> the array with a callback to fetch the option's value. Sort the search array. Now you can loop through the "options" array and look for the current smallest search item.

<pre><code>var optsNodeList = document.getElementById('foobar').options,
 optsArray = [], l = optsNodeList.length, i,
 searchArray = [2,3], matches = [], misses = [];
for( i=0; i&lt;l; i++) optsArray[i] = optsNodeList[i];
optsArray.sort(function(a,b) {return a.value &lt; b.value ? -1 : 1;});
searchArray.sort();
while(searchArray[0] &amp;&amp; (i = optsArray.shift())) {
 while( i &gt; searchArray[0]) {
 misses.push(searchArray.shift());
 }
 if( i == searchArray[0]) {
 matches.push(i);
 searchArray.shift();
 }
}
</code></pre>

blocks|key|4268554|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4268555|var+$found+=+[];
var+notFound+=+[];
var+$opt+=+$('#foobar+option');
$.each(optionValues,+function(i,+v){
++++var+$this+=+$opt.filter('[value='%2Bv%2B']');
++++if+($this.length)+{
+++++++$elems.push($this)
++++}+else+{
+++++++notFound.push(v);
++++}+
})|code-block|syntax|javascript|4268556|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code>var $found = [];
var notFound = [];
var $opt = $('#foobar option');
$.each(optionValues, function(i, v){
 var $this = $opt.filter('[value='+v+']');
 if ($this.length) {
 $elems.push($this)
 } else {
 notFound.push(v);
 } 
})
</code></pre>

blocks|key|2372077|text|尝尝这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2372078|var+optionValues+=+[2,+3],
++++elements+=+[],
++++options+=+document.getElementById('foobar').options;

var+i+=+0;
do+{
++++var+option+=+options[i];
++++if(optionValues.indexOf(%2Boption.value)+!=+-1)+{
++++++++elements.push(option);
++++}
}+while(i%2B%2B+<+options.length+-+1);|code-block|syntax|javascript|2372079|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this. 

<pre><code>var optionValues = [2, 3],
 elements = [],
 options = document.getElementById('foobar').options;

var i = 0;
do {
 var option = options[i];
 if(optionValues.indexOf(+option.value) != -1) {
 elements.push(option);
 }
} while(i++ &lt; options.length - 1);
</code></pre>

blocks|key|2371214|text|你有没有考虑过在plugin+bootstrap上创建一个大的哈希表？授权值是唯一的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2371215|var+options+=+{};

$('#foobar').children().each(function(){

++++options[this.value]+=+this;

});|code-block|syntax|javascript|2371216|这种查找方式很简单--+options[valueNeeded]。|offset|length|style|CODE|2371217|编辑-搜索optionValues|2371218|var+optionValues+=+[2,+3];

var+results+=+[];

for(i=0;+i<optionValues.length;i%2B%2B){

++++results.push[+options[+optionValues[i]+]+];

}|2371219|entityMap^0|0|0|C|K|0|5|C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@$I|Y|J|Z|K|L]]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

Have you considered creating a big hashtable at plugin bootstrap? Granted values are unique:

<pre><code>var options = {};

$('#foobar').children().each(function(){

 options[this.value] = this;

});
</code></pre>

This way looking up is straightforward - <code>options[valueNeeded]</code>.

EDIT - searching for <code>optionValues</code>:

<pre><code>var optionValues = [2, 3];

var results = [];

for(i=0; i&lt;optionValues.length;i++){

 results.push[ options[ optionValues[i] ] ];

}
</code></pre>

blocks|key|4268620|text|首先，我想感谢你们所有令人惊叹的回复！我正在考虑每一个问题，我可能会在做出决定之前做一些基准测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4268621|在此期间，我实际上找到了另一个问题的“可接受的”解决方案based+on+this+answer。|offset|length|4268622|下面是我想出来的(最后一个块，带有自定义的filter()实现，魔术就是在这里发生的)：|style|CODE|4268623|var+items+=+self.sourceList.children(".ui-selected");

var+itemIds+=+[];
items.each(function()
{
++++itemIds.push(+this.value+);
});

self.element.children().filter(function()
{
++++return+$.inArray(this.value,+itemIds)+!=+-1;
}).attr("selected",+"selected");|code-block|syntax|javascript|4268624|我怀疑这是否像你们发布的任何东西一样高效，但它已经将1500个项目列表上的“添加”选择列表的操作时间从大约10秒减少到300ms。|4268625|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/496126/848393^0|0|S|K|0|0|L|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@$D|14|E|15|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

First of all, I want to thank you all for the awesome responses! I'm considering each one, and I will probably do benchmarks before I make a decision.

In the interim, I actually found an "acceptable" solution <a href="https://stackoverflow.com/a/496126/848393">based on this answer</a> to another question.

Here's what I came up with (the last block, with the custom <code>filter()</code> implementation, is where the magic happens):

<pre><code>var items = self.sourceList.children(".ui-selected");

var itemIds = [];
items.each(function()
{
 itemIds.push( this.value );
});

self.element.children().filter(function()
{
 return $.inArray(this.value, itemIds) != -1;
}).attr("selected", "selected");
</code></pre>

I doubt this is as efficient as any of the stuff you guys posted, but it has decreased the "Add" picklist operation time from about 10 seconds to 300ms on a 1500 item list.

blocks|key|2632700|text|让optionValues通过一个要选择的索引数组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2632701|for(var+i+=+0;+i+<+optionValues.length;+i%2B%2B)+{
++document.forms[0].foobar.options[optionValues[i]].selected+=+true;
}|code-block|syntax|javascript|2632702|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Let optionValues by an array of indexes to be selected.

<pre><code>for(var i = 0; i &lt; optionValues.length; i++) {
 document.forms[0].foobar.options[optionValues[i]].selected = true;
}
</code></pre>

blocks|key|4268738|text|如果您只想按值选择，则以下内容应该是合适的。它只在选项上循环一次，不调用任何其他函数，只有一个内置方法，所以它应该很快。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4268739|function+selectMultiByValue(el,+valuesArr)+{

++var+opts+=+el.options;
++var+re+=+new+RegExp('%5E('+%2B+valuesArr.join('%7C')+%2B+')$');

++//+Select+options
++for+(var+i=0,+iLen=opts.length;+i<iLen;+i%2B%2B)+{
++++opts[i].selected+=+re.test(opts[i].value);
++}+
}|code-block|syntax|javascript|4268740|在某些浏览器中，循环遍历集合的速度很慢，因此可能需要先将options集合转换为数组。但在进行测试之前，可能不值得这样做。|4268741|请注意，如果select不是多项选择，则只会选择具有最后列出的值的选项。|4268742|如果您想要允许各种其他字符或大小写，您可能需要摆弄正则表达式。|4268743|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you just want to select by value, the following should be suitable. It only loops over the options once and doesn't call any other functions, only one built–in method so it should be quick.

<pre><code>function selectMultiByValue(el, valuesArr) {

 var opts = el.options;
 var re = new RegExp('^(' + valuesArr.join('|') + ')$');

 // Select options
 for (var i=0, iLen=opts.length; i&lt;iLen; i++) {
 opts[i].selected = re.test(opts[i].value);
 } 
}
</code></pre>

In some browsers, looping over a collection is slow so it may pay to convert the options collection to an array first. But test before doing that, it may not be worth it.

Note that if the select isn't a multiple select, only the option with the last listed value will be selected.

You may need to fiddle with the regular expression if you want to allow various other characters or cases.

blocks|key|2371305|text|我会尝试一下jQuery的filter()方法，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2371306|var+matches+=+filter(function()+{
++++//+Determine+if+"this"+is+a+match+and+return+true/false+appropriately
});

//+Do+something+with+the+matches
matches.addClass('foobar');|code-block|syntax|javascript|2371307|它在这里可能不是最快的解决方案，但它是相当优化的，并且非常非常简单，而不必跟踪列表和所有这些东西。对于您的情况，它应该足够快。|2371308|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/filter/^0|D|8|D|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

I would give jQuery's <a href="http://api.jquery.com/filter/" rel="nofollow"><code>filter()</code></a> method a try, something like:

<pre><code>var matches = filter(function() {
 // Determine if "this" is a match and return true/false appropriately
});

// Do something with the matches
matches.addClass('foobar');
</code></pre>

It may not be the fastest solution here, but it is fairly optimized and very very simple without having to keep track of lists and all that jazz. It should be fast enough for your situation.

Let's suppose I have a <code>&lt;select&gt;</code> element:

<pre><code>&lt;select id="foobar" name="foobar" multiple="multiple"&gt;
 &lt;option value="1"&gt;Foobar 1&lt;/option&gt;
 &lt;option value="2"&gt;Foobar 2&lt;/option&gt;
 &lt;option value="3"&gt;Foobar 3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

And let's suppose I have an array of values, something like:

<pre><code>var optionValues = [2, 3];
</code></pre>

How can I select the <code>&lt;option&gt;</code>s with values 2 and 3 most efficiently?

I'm working with a <code>&lt;select&gt;</code> that has thousands of <code>&lt;option&gt;</code>s, so doing it manually like this won't work:

<pre><code>var optionElements = [];

$("#foobar").children().each(function() {
 if($.inArray($(this).val(), optionValues)) {
 optionElements.push($(this));
 }
}
</code></pre>

It's just too slow. Is there a way to hand jQuery a list of values for the elements I need to select? Any ideas?

P.S. In case you're wondering, I am in the middle of optimizing my <a href="http://code.google.com/p/jquery-ui-picklist/" rel="nofollow">jQuery PickList widget</a> which currently <a href="http://code.google.com/p/jquery-ui-picklist/issues/detail?id=6" rel="nofollow">sucks at handling large lists</a>.

Most efficient way to select all elements with an array of values

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

假设我有一个<select>元素：<select id="foobar" name="foobar" multiple="multiple"> <option value="1">Foobar 1</option> <option value="2">Foobar 2</option> <option...

问选择具有值数组的所有元素的最有效方法
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择具有值数组的所有元素的最有效方法EN