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? ;+)
Well done. Thanks for the explanation. This was driving me crazy on trying to figure out the cause.
HI Marc
Thanks for Clearing this Mysteries
I have DVWP to display data from list when i do edit in DVWP one of lookup column render as Complex drop down when i click on icon nothing is happing so i tried to render dropdownlist instead of fromField in edit template and i got success but then i can change only that column if i try to change any other item its throwing error.
still not able to figure it out ….
Thanks
Ron:
I’m not sure I understand your question (if there is one!).
M.
Sorry about that.
I have list with 3 lookup Columns to other list and one list among them more than 20 options so in Edit template if DVWP that column render as a complex Dropdown list as you mention in your post.Its behavior is weird so i modify edit template to render DVdropdownlist and its works fine but when i try to update any item expect this DVdropdownlist one its gives me error.when i undo that change then it works fine with weird behavior of dropdownlist.
Error Says Item is readony
any advise on this
Great info, but is there a solution to fixing it so that it acts the same?
Derrick:
There’s no native way to do the conversion. I’ve thought about adding a function into SPServices for it, but I haven’t gotten to it. It’s certainly possible to do the conversion in script.
M.
Wilson Leung shared some jQuery code to switch the >20-item lookup control back to a normal dropdown: Fixing SharePoint 2010 Lookup Drop Down 20 Items Limit.
I recently this script on a project, and it works just fine. Note that if you use it this approach on a child column when using SPCascadeDropdowns, you’ll need to use the “temp” child column name instead of the original name. That “temp” child column name is built by Wilson’s code, and of course you’d be free to change it to something more meaningful.
Dan:
Thanks a lot for pointing me back to Wilson’s post. I knew I had seen something but couldn’t remember where!
M.
Excellent post marc as always…you wouldn’t happen to have ever injected an additional option in on-the-fly have you?
i.e. the page is rendered. Via javascript we want to add a new selectable option into the list (> 20, have gotten it going fine with 20 the values are saved in tag[#].choices and you can insert/append a new one…and set the .value and .match and get it to show…but it doesn’t post when you save the dvwp….
Any ideas?
Best,
S’
Steve:
It depends what type of column the dropdown is. If it’s a Choice column or a Lookup column, you can’t add a new value; it will be invalid because it doesn’t exist in the underlying data.
M.
p.s., Steve. You *can* add a new value to the allowable options in the Lookup list or even in the Choices by using SPServices.
M.
hi Marc, sorry, forgot to say that prior to injecting the new value in the lookup selection I’m calling the updatelistitems webservice to insert the new value into the lookup list. Will look into the SPServices…not familiar with that one yet. thanks again for your help and thought-provoking posts! Best, S’
Ended up loading the page, defaulting the new values from query string variables. From http://www.webdeveloper.com we can reload the page once we’ve gotten our new id from the web services we can load the page again with the querystring variable (foo) and add the new id (bar).
var sep = (window.location.href.indexOf(“?”)===-1)?”?”:”&”;
window.location.href = window.location.href + sep + “foo=bar”;
And the classic http://blogs.msdn.com/b/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx which is ever so useful for defaulting form fields.
Thanks again for your help marc,
S’
Any solition for this two types drop down lists?
Need to use simple one.
Syntax:
There’s no “solution” per se. It’s simply how SharePoint renders the columns based on how many options there are.
M.
I just noticed, this is not an issue on FIrefox.
In firefox it works good.
But in IE, this sticky dropdown happens.. Anyone knows any fix for this?
Syntax:
Check out my post today about the New SPServices Function: SPComplexToSimpleDropdown
M.
Thanks Marc.
The new SPService function SPComplexToSimpleDropdown works for me :)
Yes, I’m using MOSS 2007