bind array to select (drop down)?

[Joe C.]

thank you for reading.

in .net, there are ways to create an array (or arraylist) and bind it
to a dropdownlist. this prevents the use of a loop.

is there an equivalent in javascript?

currently have a large array (3000+ elements), which is then added to
a select object (drop down list) via a loop. firefox takes roughly .
15 seconds to achieve this (that's 1/20th of a second). IE7, on the
other hand, take 6.5 seconds!

firefox script:

for (i = 0; i < arrMain.length - 1; i++) {
document.getElementById('Main_ddCustList').appendChild(new Option
(arrOne, arrTwo));
}

IE script:

for (i = 0; i < arrMain.length - 1; i++) {
document.getElementById('Main_ddCustList').add(new Option(arrOne,
arrTwo));
}

so basically, any way to get IE to load 3000 elements into a select
object (downdownlist) any faster than 6.5 seconds?

any help would be greatly appreciated.

- Joe

 

[Bart Van der Donck]

in .net, there are ways to create an array (or arraylist) and bind it
to a dropdownlist.  this prevents the use of a loop.
is there an equivalent in javascript?
currently have a large array (3000+ elements), which is then added to
a select object (drop down list) via a loop.  firefox takes roughly .
15 seconds to achieve this (that's 1/20th of a second).  IE7, on the
other hand, take 6.5 seconds!

It is possible, but the memory requirements are unacceptable for your
quantity of data in that context.

firefox script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').appendChild(new Option
(arrOne, arrTwo));
}

IE script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').add(new Option(arrOne,
arrTwo));
}

so basically, any way to get IE to load 3000 elements into a select
object (downdownlist) any faster than 6.5 seconds?

If you would want to use javascript anyhow (which you don't!), then
the old class style might be a bit faster:

for (var i = 0; i < 3000; i++)
document.f.s.options[document.f.s.length] = new Option(i, i);
...
<form name="f"><select name="s" size="1"></select></form>

Defnitely much faster would be to not refer to the element 3000 times,
e.g.

var opt = '<select size="10" name="s" id="s">';
for (var i = 0; i < 3000; i++)
opt += '<option value="' + i + '">' + i + '</option>\n';
document.getElementById('s').innerHTML = opt + '</select>';
...
<div id="s"></div>

Hope this helps,

 

[Thomas Allen]

thank you for reading.

in .net, there are ways to create an array (or arraylist) and bind it
to a dropdownlist.  this prevents the use of a loop.

is there an equivalent in javascript?

currently have a large array (3000+ elements), which is then added to
a select object (drop down list) via a loop.  firefox takes roughly .
15 seconds to achieve this (that's 1/20th of a second).  IE7, on the
other hand, take 6.5 seconds!

firefox script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').appendChild(new Option
(arrOne, arrTwo));

}

IE script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').add(new Option(arrOne,
arrTwo));

}

so basically, any way to get IE to load 3000 elements into a select
object (downdownlist) any faster than 6.5 seconds?

any help would be greatly appreciated.

On another note, why are you adding this many options to a drop-down
list? Have you considered other options? Seems like a usability
mistake.

Thomas

 

[Joe C.]

thank you for reading.

in .net, there are ways to create an array (or arraylist) and bind it
to a dropdownlist.  this prevents the use of a loop.

is there an equivalent in javascript?

currently have a large array (3000+ elements), which is then added to
a select object (drop down list) via a loop.  firefox takes roughly .
15 seconds to achieve this (that's 1/20th of a second).  IE7, on the
other hand, take 6.5 seconds!

firefox script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').appendChild(new Option
(arrOne, arrTwo));

}

IE script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').add(new Option(arrOne,
arrTwo));

}

so basically, any way to get IE to load 3000 elements into a select
object (downdownlist) any faster than 6.5 seconds?

any help would be greatly appreciated.

On another note, why are you adding this many options to a drop-down
list? Have you considered other options? Seems like a usability
mistake.

Thomas

you're right, knowing that this is becoming a problem, i began to
think that using a drop down may not be a good option.

would a natural language search be a more appropriate option? or
perhaps a pop-up window with a list?

- joe

 

[Joe C.]

in .net, there are ways to create an array (or arraylist) and bind it
to a dropdownlist.  this prevents the use of a loop.
is there an equivalent in javascript?
currently have a large array (3000+ elements), which is then added to
a select object (drop down list) via a loop.  firefox takes roughly .
15 seconds to achieve this (that's 1/20th of a second).  IE7, on the
other hand, take 6.5 seconds!

It is possible, but the memory requirements are unacceptable for your
quantity of data in that context.

firefox script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').appendChild(new Option
(arrOne, arrTwo));
}

IE script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').add(new Option(arrOne,
arrTwo));
}

so basically, any way to get IE to load 3000 elements into a select
object (downdownlist) any faster than 6.5 seconds?

If you would want to use javascript anyhow (which you don't!), then
the old class style might be a bit faster:

  for (var i = 0; i < 3000; i++)
    document.f.s.options[document.f.s.length] = new Option(i, i);
  ...
  <form name="f"><select name="s" size="1"></select></form>

Defnitely much faster would be to not refer to the element 3000 times,
e.g.

  var opt = '<select size="10" name="s" id="s">';
  for (var i = 0; i < 3000; i++)
    opt += '<option value="' + i + '">' + i + '</option>\n';
  document.getElementById('s').innerHTML = opt + '</select>';
  ...
  <div id="s"></div>

Hope this helps,

Brillian, i'll give this a go right now and report back the results.

thank you for the insight!

- Joe

 

[Joe C.]

thank you for reading.

in .net, there are ways to create an array (or arraylist) and bind it
to a dropdownlist.  this prevents the use of a loop.

is there an equivalent in javascript?

currently have a large array (3000+ elements), which is then added to
a select object (drop down list) via a loop.  firefox takes roughly .
15 seconds to achieve this (that's 1/20th of a second).  IE7, on the
other hand, take 6.5 seconds!

firefox script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').appendChild(new Option
(arrOne, arrTwo));

}

IE script:

for (i = 0; i < arrMain.length - 1; i++) {
        document.getElementById('Main_ddCustList').add(new Option(arrOne,
arrTwo));

}

so basically, any way to get IE to load 3000 elements into a select
object (downdownlist) any faster than 6.5 seconds?

any help would be greatly appreciated.

On another note, why are you adding this many options to a drop-down
list? Have you considered other options? Seems like a usability
mistake.

Thomas

oh, should mention. the drop down contains a list of our customers.
initially this was a small list (300 or so?). but since this was
written the customer base has increased substantially.

i've had almost no complaints about useability (users have become
savvy at locating their selection in this drop down). but, sticking
to best practices, can you suggest some other options (natural
language search?)?

 

[Thomas Allen]

 

[Thomas 'PointedEars' Lahn]

in .net, there are ways to create an array (or arraylist) and bind it
to a dropdownlist. this prevents the use of a loop.
is there an equivalent in javascript?
currently have a large array (3000+ elements), which is then added to
a select object (drop down list) via a loop. firefox takes roughly .
15 seconds to achieve this (that's 1/20th of a second). IE7, on the
other hand, take 6.5 seconds!

It is possible, but the memory requirements are unacceptable for your
quantity of data in that context.
Pardon?

firefox script:

for (i = 0; i < arrMain.length - 1; i++) {
document.getElementById('Main_ddCustList').appendChild(new Option
(arrOne, arrTwo));
}

IE script:

for (i = 0; i < arrMain.length - 1; i++) {
document.getElementById('Main_ddCustList').add(new Option(arrOne,
arrTwo));
}

so basically, any way to get IE to load 3000 elements into a selec or XHTML documents served as text/html.

t

object (downdownlist) any faster than 6.5 seconds?

If you would want to use javascript anyhow (which you don't!), then
the old class style might be a bit faster:

Surely it is a lot more *compatible*. MSHTML implements the add() method of
select objects differently than specified in the W3C DOM and, e.g. Gecko.
Therefore, add() should be avoided.

for (var i = 0; i < 3000; i++)
document.f.s.options[document.f.s.length] = new Option(i, i);

var sel = document.forms["f"].elements["s"];
for (var i = 0; i < 3000; i++)
{
sel.options[sel.length] = new Option(i, i);
}

is more efficient, more compatible, and more standards-compliant than that.

...
<form name="f"><select name="s" size="1"></select></form>

The required `action' attribute is missing from the `form' element.
The required `option' element is missing from the content of the `select'
element. That markup is not Valid, it is not going to work (consistently
among different browsers and layout engines).

Defnitely much faster would be to not refer to the element 3000 times,
e.g.

var opt = '<select size="10" name="s" id="s">';
for (var i = 0; i < 3000; i++)
opt += '<option value="' + i + '">' + i + '</option>\n';
document.getElementById('s').innerHTML = opt + '</select>';

If Firefox/Iceweasel 3.0.6 is any indication, the following should be even
faster:

var opt = ['<select size="10" name="s" id="s">'];
for (var i = 0; i < 3000; i++)
{
opt.push('<option value="' + i + '">' + i + '<\/option>');
}

document.getElementById('s').innerHTML = opt.join("") + '<\/select>';

However, the proprietary, error-prone `innerHTML' property should be
avoided. And don't forget to brace yourself ;-) as well as watching for
ETAGOs in scripts within HTML documents, or XHTML documents served as text/html.


PointedEars

 

[Jeremy J Starcher]

you're right, knowing that this is becoming a problem, i began to think
that using a drop down may not be a good option.

would a natural language search be a more appropriate option? or
perhaps a pop-up window with a list?

I have an interface that I wish I could show you, unfortunately its on
our local server at the moment.

This is a cross-reference application that allows looking up parts by
part number or description, but it would work just as well with a list of
names.

I prompt for:
Part number or description: [__________________________]

I check for part numbers (customer IDs?) first, and if found, I resend
the form, putting the part reference in a hidden field.

If the part number was *not* found, then I do a keyword search for each
word entered in the description field. I then build a much more limited
drop-down menu based upon that.

So that


Part number or description: [Bulb 12V 25W______________]

Would then turn into a drop down list like:

Choose correct part: [ZMD 847362 - Bulb 12V 25W ]
[FWX ABDCW - BULB 12V 25/25W ]
[DJQ ZID - BULB 12V 15/25W ]

This is as far as I'll on-list with this topic as we have really veered
away from Javascript. Feel free to contact me off-list, however.

 

[Dr J R Stockton]

In comp.lang.javascript message <65f49e44-dddc-427c-b1ce-3c52640e5183@k8
g2000yqn.googlegroups.com>, Tue, 7 Apr 2009 08:23:41, Joe C.

oh, should mention. the drop down contains a list of our customers.
initially this was a small list (300 or so?). but since this was
written the customer base has increased substantially.

Consider using 27 radiobuttons to get the first character of the
customer name (default:none) and then just load the select with the
required subset of characters.

One hopes that this is on an Intranet and not on the Web, since showing
customers the names of other customers is a breach of privacy and should
be illegal in respectable countries.



<FAQENTRY> Section 1.3 part 1.

(A) the page linked to in sub-sub-sub-section 4 is so long that it is
unreasonable to expect anyone to read it.

(B) There should be a sub-sub-sub-section on information to include :
Web/Internet? Location if possibly significant? Browser(s) tested on?
Expected result?

"Posting Code" could also link directly to the CSS validator.
Indent code to show structure.

FAQ 2.1 para 3 looks silly with no mention of MSIE Firefox Safari Opera
or Chrome. The intended readers will know nothing of JScript/JavaScript
versioning.

 

[Joe C.]

One hopes that this is on an Intranet and not on the Web, since showing

customers the names of other customers is a breach of privacy and should
be illegal in respectable countries.

indeed, this 'tool' is behind a firewall and only used on the local
network.

 

[Bart Van der Donck]

Pardon?

Well, simply see the memory benchmarks: I think we agree that 6,5
seconds is not acceptable here. And I understand from the original
poster that his customer list is continuously growing, so it will even
become slower and slower. If he wants to do it anyhow (which he
doesn't!), he should at least show some waiting symbol (animated gif
or stuff like that).

If Firefox/Iceweasel 3.0.6 is any indication,

Is it ? One single benchmark for one specific browser version ? Only
see the original post how such benchmarks can vary.

the following should be even faster:

"should" ?

  var opt = ['<select size="10" name="s" id="s">'];
  for (var i = 0; i < 3000; i++)
  {
    opt.push('<option value="' + i + '">' + i + '<\/option>');
  }
  document.getElementById('s').innerHTML = opt.join("") + '<\/select>';

That is certainly not always correct. Why drawing conclusions so
quickly ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function benchmark() {
for (var j = 0; j < 10; j++) {
var d1 = (new Date()).getTime();
var opt2 = '<select size="10" name="s" id="s">';
for (var i = 0; i < 3000; i++)
opt2 += '<option value="' + i + '">' + i + '</option>\n';
document.getElementById('s').innerHTML = opt2 + '</select>';
var d2 = (new Date()).getTime();
var opt = ['<select size="10" name="s" id="s">'];
for (var i = 0; i < 3000; i++)
opt.push('<option value="' + i + '">' + i + '<\/option>');
document.getElementById('s').innerHTML = opt.join("")+'</select>';
var d3 = (new Date()).getTime();
var r = (d2-d1) + ' vs. ' + (d3-d2) + ' ms.: you\'re ';
d2-d1 > d3-d2 ? r+='right' : r+='wrong';
document.getElementById('t').innerHTML+=r+'<br>\n';
}
}
</script>
</head>
<body onLoad="benchmark()">
<div id="s" style="display: none;"></div><div id="t"></div>
</body>
</html>

 

[Joe C.]

this is it, this method of forming the HTML using a loop is BY FAR the
fastest rendering.

3000+ elements are rendering in less than .1 seconds (1/10 of a
second) across browsers (ie, ff, chrome).

 

[RobG]

this is it,

What is? Please trim quotes and reply below what you are replying to.

this method of forming the HTML using a loop is BY FAR the
fastest rendering.

"this" being what? Two methods were proposed: concatenting a string
on each loop using += compound operator and array push/join. In
Firefox, they are about the same. In IE, the string concatenation
method is much slower, though it will still create a string of 3,000
options pretty quickly.

Replacing:

opt.push(...)

with:

opt = ...

makes Firefox 3 times faster again, but slows IE a little.

3000+ elements are rendering in less than .1 seconds (1/10 of a
second) across browsers (ie, ff, chrome).

The actual time is only relevant for a particular PC configuration, so
it is more informative to let us know what it is. On a 3.4GHz P4,
the opt version takes about 22ms in Firefox and about 90ms in IE
for 3,000 options.

If using DOM methods, you can also create a single option, then clone
it and add it to a documentFragment or created select element. The
idea is to append them to a parent element in memory before putting
them into the document in a single call. That approach took around
3.5seconds in IE and 200ms in Firefox, which is much slower than using
a string with innerHTML but very much faster than in the original.