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? ;+)
Thanks Marc for the quick reply.
But I dont see this behaviour on FIrefox. So thought it might be the browser issue.
Thanks Marc
Syntax:
From your comments, I’m guessing that you may be running 2007, but perhaps not. SharePoint makes a decision in 2007 whether you are running IE (the only Tier 1 browser) and if you are, you get the “smart” complex dropdowns. If you are running any other browser, you get the “dumb” selects. There are plusses and minues to either approach, but to most users those plusses and minuses are overshadowed by the “I don’t understand” feeling.
M.
I’m just going through this and your recent post on the required bug but am unable to actually create a “complex” dropdown. Tried various ways by adding up to 50 items and making the items long text. Still nothing.
You should automagically get the complex dropdown if you have a Lookup or Choice column with 20+ options. There’s no way I know of *not* to get it. Are you trying this in 2010 or 2007? What type of column? Can you ping me the details?
M.
Hi Marc,
What do you think of simply adding “InDesign=’true'” to the form field? This also “converts” the complex dropdown to a simple dropdown.
I first found out about it here:
http://www.codeproject.com/Articles/194254/Advanced-fixing-SharePoint-2010-large-lookup-dropd
Thanks!
Kim:
That will work if you’re customizing the form, but it’s not a viable option for many people. Great tip, though!
M.
Thanks for the advice, Marc! :)
Hi Marc, I’ve got 5 cascading dropdowns, I’m using SPServices 0.7.2 together with JQuery 1.8.1 to get my cascading dropdowns working and I’ve used the “SPComplexToSimpleDropdown” function to prevent complex dropdown, all that is working perfectly. All my dropdowns are lookup columns that load more than 20 items from the datasource so all of them are complex dropdowns according to IE but i’ve taken care of that through the use of “SPComplexToSimpleDropdown” function so they’re bahaving normally. Within the same form, there are some input fields that are applicable on certain options from the dropdowns so i would like those fields to hide/show depending on that chosen option from the dropdowns. I’ve implemented a javascript for that but it only works in Firefox and Google Chrome but still doesn’t work in IE even though i’ve used “SPComplexToSimpleDropdown” to prevent complex dropdowns. My main goal is to have these other input fields hidden when the form loads then appear only when a certain option is chosen on one of the dropdowns. Please point me to the correct direction because i believe even though those dropdowns appear as simple dropdowns, technically they are still complex dropdowns behind the scenes and i think that’s one of the main reasons they are not responding to the javascript onChange event. On firefox and Chrome the solution works like a charm, the input fields show and hide as requested.
Siyasanga:
Can you post your code on the Codeplex Discussions? It would be easier to answer looking at it.
M.
Hi Marc:
Thank you very much for the quick response, i’ve created a thread called “Hide/Show fields based on option chosen in complex dropdown (I suspect javascript onChange event not firing in sharepoint complex dropdown)” under the discussion “SharePoint Cascaded Lookups – JavaScript based”
Siyasanga:
I’m not sure where you’ve put it, as I don’t see it on the SPServices site.
M.
Here is the link: http://spcd.codeplex.com/discussions/434685
I’m not sure whether i’ve put it in the correct place
Siyasanga:
SPCD is not my code. Mine is SPServices. If you’re using SPCD, I can’t help you.
M.
Marc:
My apologies Marc, i didn’t realise. Here is another link on SPServices. http://spservices.codeplex.com/discussions/434698
We can do it here’s the solution,
http://sharepointegg.blogspot.in/2010/10/fixing-sharepoint-2010-lookup-drop-down.html