I have a <select> element displaying values from a big database. Using jQuery I need to select the relevant items. The problem is that when I have large amount items to select, about 60,000, the time that $(options2select).prop('selected',true), can take too long, about 50 seconds!
Note: I used the attr() method before, but read somewhere that prop() is faster, and it's not!
I'm searching for a way to optimize this task but I can't find any. Any advice will be appreciated.
60,000 options in select lists in a browser is not going to be workable on several levels, not least user experience. It's just always going to be slow and awkward, not to mention incomprehensible to the user. So the best thing to do here is to not do that, to put things into categories, etc., etc.
Answering the actual question, though:
Assuming options2select is an array (since you haven't said what it is), this would probably be faster:
options2select.forEach(function(option) {
option.selected = true;
});
or even
var n;
for (n = options2select.length - 1; n >= 0; --n) {
options2select[n].selected = true;
}
Assuming options2select is a selector, much the same with document.querySelectorAll at the outset:
var list = document.querySelectorAll(options2select);
Array.prototype.forEach.call(list, function(option) {
option.selected = true;
});
or even
var list = document.querySelectorAll(options2select);
var n;
for (n = list.length - 1; n >= 0; --n) {
list[n].selected = true;
}
But again, faster doesn't mean fast.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments