Two Types of SharePoint Forms Dropdowns

I think I’ve typed bits and pieces of this post to people a few hundred times. Why I have never thought to make it a post is beyond me!  SharePoint renders dropdowns in forms two different ways, depending on how many options there are in the column.

If there are fewer than 20 options, then SharePoint gives you what I call a “simple” dropdown.  It’s just a plain old select.

If there are 20 or more options, then SharePoint gives you what I call a “complex” dropdown. It’s made up of an input element and a hidden select with a bunch of script in core.js that ties it all together to make it work.

Can you see the difference? It’s not all that obvious at first glance, but the way you can tell easily is to look at the little dropdown icons.

See how the first icon has a darker triangle?  And the second has a little grey border?

I had to figure this out and get *very* familiar with it when I was building my SPCascadeDropdowns function in SPServices.  If you are trying to do anything to manipulate dropdowns in the DOM, you’ll need to understand them, too.

Even more annoying to users, though, is that they behave differently.

The simple type of dropdown behaves normally.  You can click on the icon or anywhere in the text area, the values drop down, you can select one, and the dropdown closes up immediately.

With a complex dropdown, the behavior is different.  If you click in the text area (actually the input element), nothing happens. You need to click on the icon, which then drops down the values (there’s a click event on that little image (/_layouts/images/dropdown.gif). Then you can click on a value, but the dropdown will not close up!  You have to either double click the value or click elsewhere (to remove focus) for the dropdown to close.

In my experience, the behavior difference is what drives end users batty. Most of them don’t even notice the visual difference, but the double click things is really annoying.  It’s one of the tiny little things that make people wonder what’s “wrong” with SharePoint.  Sure, try to explain the underlying functionality differences and watch the blank stares.  You won’t win that one!

Finally, the value storage and capture mechanisms are totally different as well.  Here is the DOM snippet for a simple dropdown:

<SPAN dir=none lpcachedvisval="1" lpcachedvistime="1274306928"><SELECT id=ctl00_m_g_01a3a856_7297_48e8_b963_10c9826b4b82_ctl00_ctl04_ctl01_ctl00_ctl00_ctl04_ctl00_DropDownChoice-RadioText title="Lead Source" name=ctl00$m$g_01a3a856_7297_48e8_b963_10c9826b4b82$ctl00$ctl04$ctl01$ctl00$ctl00$ctl04$ctl00$DropDownChoice lpcachedvisval="1" lpcachedvistime="1274306928"> <OPTION value="Newspaper Advertising">Newspaper Advertising</OPTION> <OPTION selected value="Web Site">Web Site</OPTION> <OPTION value="Personal Referral">Personal Referral</OPTION></SELECT><BR></SPAN>

and for a complex dropdown:

<SPAN dir=none lpcachedvisval="1" lpcachedvistime="1274306973"><SPAN style="VERTICAL-ALIGN: middle" lpcachedvisval="1" lpcachedvistime="1274306973"><INPUT onkeydown=HandleKey() id=ctl00_m_g_01a3a856_7297_48e8_b963_10c9826b4b82_ctl00_ctl04_ctl04_ctl00_ctl00_ctl04_ctl00_ctl01-lookuptypeintextbox title=State onfocusout=HandleLoseFocus() onkeypress=HandleChar() onchange=HandleChange() value="Rhode Island" name=ctl00$m$g_01a3a856_7297_48e8_b963_10c9826b4b82$ctl00$ctl04$ctl04$ctl00$ctl00$ctl04$ctl00$ctl01 choices="Alabama|23|Alaska|20|Arizona|8|California|3|Colorado|4|Florida|5|Georgia|6|Idaho|13|Illinois|21|Indiana|17|Massachusetts|1|Missouri|22|Nevada|7|New Jersey|16|New York|15|Ohio|10|Oregon|12|Pennsylvania|14|Rhode Island|2|Texas|18|Washington|11|Wyoming|9" match="" optHid="SPState_Hiddenctl00$m$g_01a3a856_7297_48e8_b963_10c9826b4b82$ctl00$ctl04$ctl04$ctl00$ctl00$ctl04$ctl00" opt="_Select" lpcachedvisval="1" lpcachedvistime="1274306973"><IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px" onclick="ShowDropdown('ctl00_m_g_01a3a856_7297_48e8_b963_10c9826b4b82_ctl00_ctl04_ctl04_ctl00_ctl00_ctl04_ctl00_ctl01');" alt="Display lookup values" src="/_layouts/images/dropdown.gif"></SPAN><BR></SPAN>

See? ;+)