This project has moved and is read-only. For the latest updates, please go here.

CascadingDropdown demo

Oct 7, 2012 at 4:32 PM

Hi Marc, I'm looking at the CascadingDropdown demo at

When the page loads for the first time, the "State" option is defaulted to "Choose State...". I've tried looking at the html/js code to see how you added it to the "State" lookup list but I don't see how you did it.

I like this feature and if possible, could you please share with me how you did it? Thank you!

Oct 8, 2012 at 2:47 AM
Edited Oct 8, 2012 at 2:48 AM


That page is still using an older version of SPServices (v0.5.8). (I'm going to change that to v0.7.2 when I'm done answering you.)

If you look at the docs for SPCascadeDropdowns, there's an option called promptText. In earlier versions of SPServices, the default was "Choose {0}...", but now it's n empty string "". By specifying a string for that option, you can specify what the prompt text should be. The problem is that (as I point out in the docs and the reason I've deprecated it) if the user leaves that value selected, SharePoint throws an ugly error.

My guess is that you're looking at the page with a nonIE browser, as the promptText only shows up if the dropdown is rendered as a simple select.


Oct 8, 2012 at 3:12 AM

Hi Marc, thanks for the quick response. You are right about me viewing the demo page with a non IE browser, I was looking at it in FF.

I am currently using the simpleChild = true property in SPCascadeDropdowns. I have seen that you just updated the demo page, and noticed that the "State" initial value is now empty. How do you do this with SPCascadeDropdowns? Do you have simpleChild = false?

I can't seem to do it with my drop down list.. is it because I have simpleChild = true? If so.. is there any way for me to get the user to select an option instead of defaulting to a value when the page loads for the first time? Thanks!

Oct 8, 2012 at 3:14 AM

In the demo page, I'm not converting the dropdown to a simple child. However, in Firefox, SharePoint renders all dropdowns as simple selects, regardless how many values there are.


Oct 8, 2012 at 3:30 AM

I have two drop down list; Parent Resolution (less than 20 items) and Sub Parent Resolution (more than 20 items).

If I use simpleChild = true, the Sub Parent Resolution drop down list looks weird like this:

Do you have any recommendation on how to force the users to select the Parent and Sub resolutions as these are lookup columns..  I've read that it isn't possible :(

Oct 8, 2012 at 3:36 AM

Hmm. I don't know what's going on there; I've never seen that before.

Can you paste in your code?


Oct 8, 2012 at 3:42 AM

Which code would you like to see? SPCascadeDropdown code or the entire HTML code? Some of the contents of the drop down list contains sensitive information and if possible, I'd rather mail it to you privately.

Oct 8, 2012 at 3:45 AM

Just the script. Also, I assume that you've checked the list structures versus my examples?

Also, do you have any custom branding in place which might cause that wacky display?


Oct 8, 2012 at 3:50 AM
Edited Oct 8, 2012 at 3:50 AM

Heres the script:

            $(document).ready(function() {
                    relationshipList: "Resolution Sub Category",
                    relationshipListParentColumn: "ResolutionParentCategory",
                    relationshipListChildColumn: "Title",
                    relationshipListSortColumn: "Title",
                    parentColumn: "ResolutionParentCategory",
                    childColumn: "ResolutionSubCategory",
                    simpleChild: false

When you say List structures.. are you referring to grouping them up? My list is not grouped up as compared to yours, does this impact how it works?

The only branding I see is the company logo right at the bottom of the page, and this is found on the first page of the Sharepoint website when you enter it at the default page. Once you go into another page with a list, there is no branding logo at the bottom.

Oct 8, 2012 at 5:24 AM

Nothing looks wrong with your script.

What do you mean by "grouping them up"? You should have two lists plus the list you're using SPCascadeDropdowns on.


Oct 8, 2012 at 5:58 AM

Are you saying that I need 3 lists in total? I just have 2 right now, one is called ResolutionParentCategory and another is ResolutionSubCategory.

In your demo, your list has the "Group By" option, where as I did not enforce that option on my list, does it make any difference to how SPCascadeDropdowns work?

Oct 8, 2012 at 4:10 PM

Those two lists seem right, but then the third list is the one where you are using them as lookups, right?

  • ResolutionParentCategory where Title = ResolutionParentCategory
  • ResolutionSubCategory where Title = ResolutionSubCategory and ResolutionParentCategory is a lookup into ResolutionParentCategory.Title
  • List 3 where ResolutionParentCategory is a lookup into ResolutionParentCategory.Title and ResolutionSubCategory is a lookup into ResolutionSubCategory.Title

If you mean the Group By in the States list default view, no that doesn't matter at all. I request things in the CAML query such that the default view settings are overriden.


Oct 9, 2012 at 9:09 AM

Yes Marc, I have a third list that is actually using the SPCascadeDropdowns.

You mentioned that you are not using simpleChild = false.. and by doing so, you are able to achieve in having the State drop down list to show no initial value when the page loads the first time, correct?

What if you had more than 20 items in the drop down list? You would have to go simpleChild = true no? But by doing so, the initial empty value for the drop down list will not be available anymore. Is there a possibility to get a fix for this? Also, would it be possible for me to modify the current SPServices .js file locally on my computer and attempt to contribute and submit a pull request to you?

Oct 10, 2012 at 4:33 PM

It sounds like you've got things set up properly. (Many people don't initially.)

It's more a function of whether the column is required or not. In SPServices, I try to mimic what the behaviors are out of the box. When you set simplyChild: true, you're converting the complex dropdown (an input element, with a select element and some script) to a select.


Oct 16, 2012 at 2:05 AM

Marc, after a few days of searching, I came across this link:

Not sure if you would find this useful in the future but I think it could work for me as after doing some preliminary testing, it does work with SPServices and such, awesome!