27

Does anyone know how many options a drop down list can have? Is it unlimited? How many before performance degrades?

bdukes
  • 152,002
  • 23
  • 148
  • 175
Steve T
  • 7,729
  • 6
  • 45
  • 65
  • 4
    i know this question is quite old, but to future reference i have used a select with 30800 options and worked quite well (when the php script doesn't go out of time to fetch the values) – STT LCU Jan 16 '12 at 15:26
  • A bigger issue might be the timeout if an AJAX database query is populating the list. So people landing here might also want to search on AJAX timeouts if this is their situation. – Scott C Wilson Sep 04 '15 at 01:55

6 Answers6

25

Does anyone know how many options a drop down list can have? Is it unlimited?

I imagine it is unlimited in theory, obviously not in practice as a computer's RAM and the specific browser's limitations come into play.

How many before performance degrades?

Again, this would depend on a few factors, at the least the specific browser, the computer's memory and processing power.

EDIT: From experience, I have had drop down lists with thousands of options. It wasn't ideal though because who wants to scroll through all of those? This is why an auto-complete of some type is more desirable for numerous reasons, especially the end user's experience.

Jason Bunting
  • 58,249
  • 14
  • 102
  • 93
12

Update: Based on DannyG, tested on Ubuntu with Firefox on a 4GB mem pc, limit was far beyond 10k tags. My current Firefox is set to use up to 3GB and it has reached a 100k options, but for that, you'd have to change the default config of the browser I guess.

We opted to use an Ajax autocomplete as replacement in all cases that 30+ options where given.

Both Firefox and Chrome limited to 10k options in Windows 64b with 4GB ram on default config.

Tested with JSFiddle http://jsfiddle.net/Mare6/

for (var i=0; i<10000; i++) {
    var name = "Option "+i;
    var sel = document.getElementById("list");
    sel.options[sel.options.length] = new Option(name,i);
}
<a>Testing Select</a>
<select id="list"></select>

Regards,

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
Katesclau
  • 192
  • 1
  • 8
  • 1
    fascinating, especially since Mozilla's docs state "Permitted content Zero or more elements." - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fselect – Steve T Mar 12 '14 at 04:26
  • 2
    Not true, i have a select with 80000 options, chrome allows 30.000 in one machine and 20.800 on another, first machine has 8Gbs of RAM second one has 4GB, so its mostly based on computer specs. – DJ22T Jan 05 '15 at 13:57
7

Yes, the maximum for Chrome and Safari is 10000 items for select elements at least.

The relevant lines in the Chrome source can be found here: Defined max of 10000, Code that enforces limit and puts error in console

Firefox seems to have no practical limit from my testing.

Kevin London
  • 4,628
  • 1
  • 21
  • 29
7

I've used right around 500 in a list with no noticeable performance impact if that helps!

Ethan Gunderson
  • 10,959
  • 8
  • 30
  • 29
4

In my experience the performance degradation is generally on the side of the user, my golden rule (learned somewhere) is seven options, give or take a few.

On a more SW related basis, probably the top range of Integer.

EDIT: BTW This is kind of relevant from Atwood

stjohnroe
  • 3,168
  • 1
  • 27
  • 27
0

In theory, there is no limit, but some browsers will implement limits. (Similar to using document.write in an infinite loop.)

But, at the end of the day, the most I would ever recommend in a drop-down-list, is about 50, just because no-one wants to do that much scrolling. That said, if organized, say by alphabetical order, it may be appropriate to have as many as 200 items in a drop-down-list. (Like for a sign-up form where you must select you country of birth.)

Also, when you have many different set choices, a drop-down-list is normally the best option, regardless.

Ben
  • 2,200
  • 20
  • 30