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? ;+)


DOM Inspectors for Different Browsers

I’ve been using the Internet Explorer Developer Toolbar for years with Internet Explorer 7 and below.  When Internet Explorer 8 came out, it had these tools baked right in and called the Developer Tools.  (You can activate the Developer tools by hitting F12 in IE8.)

But what if you need to peek into the DOM with Safari or Firefox?  Here are the tools for the Windows platform:


From Safari help:

To examine the resources of a webpage:

  1. Open the website, and then choose Develop > Show Web Inspector. The Web Inspector’s sidebar lists the categories of resources found on the page, such as documents, style sheets, and scripts.

    Note:If the Develop menu does not appear in the menu bar, open Safari preferences, click Advanced, and select “Show Develop menu in menu bar.”



From the Firebug Web Site:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Visit the Firebug website for documentation, screen shots, and discussion forums: