Meaningless Drivel is fun!*
The moose likes HTML, CSS and JavaScript and the fly likes Adding many options to a select box - strange IE6 behavior Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Adding many options to a select box - strange IE6 behavior" Watch "Adding many options to a select box - strange IE6 behavior" New topic
Author

Adding many options to a select box - strange IE6 behavior

Sol Mayer-Orn
Ranch Hand

Joined: Nov 13, 2002
Posts: 311
Hi,

Could anyone please explain the following oddity ?

I'm adding lots of <option> items into a <select> box.
'Lots' means about 2000 <option> items (ugly, but it's a requirement).
Addition is done dynamically using javascript.

Following advice on this forum, I used DOM (there *are* many other ways to do it, but let's please focus on DOM).
So, it's something like:


Now, this works pretty fast on firefox (takes less than 2 seconds on my machine), but it's very slow on IE6 (about 5-6 seconds).
The weird thing is, I *can* speed up IE6, if I append the options into a nested <optgroup> instead of directly into a <select> box
Namely, IE6 runs pretty fast if I add my options into something like:
<select>
<optgroup label='something' id='myGroup'>
</optgroup>
</select>

Could anyone please explain why <optgroup> makes such a difference in IE6 performance ?

Please see a live demo here:
View a live demo of my question

Thanks
[ May 03, 2007: Message edited by: Sol Mam-Orn ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60752
    
  65

Without any knowledge of IE6 internals, hard to make any sort of guess.

So I'd say for IE6, use the optgroup!


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Sol Mayer-Orn
Ranch Hand

Joined: Nov 13, 2002
Posts: 311
thanks.
Garrett Smith
Ranch Hand

Joined: Jun 27, 2002
Posts: 401
2 seconds is not fast.

2000 is horrible U/X. You should categorized these.

I would suggest setting options.length then looping through the unset options and setting them. This approach has been supported for a long time.


comp.lang.javascript FAQ: http://jibbering.com/faq/
Sol Mayer-Orn
Ranch Hand

Joined: Nov 13, 2002
Posts: 311
Thanks for this additional reply.

Categories would be great, only it would take my users a couple of months to debate the categories, meanwhile we're looking for 'fast and dirty' solutions.

Thanks a lot for the idea about setting existing options, i'll try it out
Garrett Smith
Ranch Hand

Joined: Jun 27, 2002
Posts: 401
Ah, the old "Just get it done."

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
JavaScript is not meant to do huge loops. I am sure some slower computers may give a message saying that the page is not responding.

Personally I would do an autocomplete or break up values alphabetically into lists. 2000 options is way to many thing for a person to go through, it needs to be small subsets.

Eric
 
Consider Paul's rocket mass heater.
 
subject: Adding many options to a select box - strange IE6 behavior
 
Similar Threads
question about "OPTGROUP"
Question on select-box options
s:iterator within s:select
Form to search bean
Element Shift Problem in Dynamic Form