How do I: Fill a SELECT element's options array *quickly*?

[AdeV2]

The scenario is: I'm populating a set of drop-downs each of which has, in one real-life example, 280 items. The number of drop-downs varies, but let's say there's 10 sets of 5 drop-downs (this is about right).

At the moment, I'm having to individually create 10 * 5 * 280 OPTION elements. It's taking around 100ms to create each dropdown, about 1/2 sec to create each set of 5*280 drop downs, or about 5 seconds overall.

Along with the other code that's churning around in the mill, the response time is at around 7sec between the user clicking the control which starts all this off; and the browser finishing.

If I could create the option array once (100ms), then farm it out to each dropdown as it's created, I could potentially save myself 2-3 or even 4 seconds, which would dramatically improve the application's responsiveness. This is particularly true if you think that the user could, in theory, add 5, 10, 20 or more dropdowns very easily.

Needless to say, this is not a problem on smaller installations; but the biggest customer is also the one who notices it the most...

Any ideas?

I tried this:

thisSelect.options=myOptions.slice(0,myOptions.length-1);

where thisSelect is the new select object, myOptions is an array I created using document.createElement('OPTION'). I'm using the .slice method to ensure I get a clone of the array, rather than a reference to it. I get the error "Not implemented..."

Thanks in advance!
Ade.

 

[feherke]

Hi

where thisSelect is the new select object

You mean, you created the [tt]select[/tt] earlier with [tt]document.createElement()[/tt] ? If yes, was thisSelect already added to the [tt]document[/tt] when you add the [tt]option[/tt]s ? If yes, try to move the adding to the [tt]document[/tt] after adding the [tt]option[/tt]s.

No other ideas for now. At least not without seeing any code.

Feherke.

http://free.rootshell.be/~feherke/