Almost three years ago I posted a script on how to create cascading drop downs for SharePoint 2013 and SharePoint Online using REST.
Cascading Drop Down Lists in SharePoint / Office 365 using REST
Since then I’ve had a lot of comments asking for additional functionality to that script. So, I decided it was time to update the script and make it a little more modular. If you are a user of the previous script, the biggest change you will see is how you execute the cascade function. Now, instead of passing in an object to the cascade functionality, you pass in an array of objects. This allows you to set up multilevel cascading.The updated script can be found on GitHub at https://github.com/mrackley/HillbillyCascade
var cascadeArray = new Array();
cascadeArray.push({
parentFormField: "<display name>", //Display name on form of field from parent list
childList: "<list name>", //List name of child list
childLookupField: "<internal name>", //Internal field name in Child List used in lookup
childFormField: "<display name>", //Display name on form of the child field
parentFieldInChildList: "<internal name>", //Internal field name in Child List of the parent field
firstOptionText: "< text >"
});
$().HillbillyCascade(cascadeArray);
As always, take a look at the video at the end of the blog post for step by step instructions and to see the script in action.
Updated Features
- Multiple cascades – In the previous script, it only worked for one level. In the updated script you can have as many levels as you’d like. All you need to do is create a new cascade object and add it to the array.
- New and Edit Form – The updated script works well on both new and edit forms.
- Default text for unselected dropdown – You now specify what you want the text of the select to be if nothing has been selected yet
And just like the previous script, you can update the REST query to work with 2010. This solution “as is” will work on SharePoint 2013, 2016, and SharePoint Online for Classic Forms. If you are using the new Modern Forms you cannot customize those forms. You’ll need to look at using something like StratusForms with a SPFx Client Web Part.
The Video
As promised, the below video shows you how to implement the script found in GitHub. In the video, I’m using Office 365 and have a 2 level cascade (State->County->City).
The other stuff
There have been a LOT of requests around this script including debugging questions from those who have not been able to implement it correctly. Unfortunately, I simply do not have the time to respond to all of these emails. If you are having issues with the script, I strongly urge you to implement the list structure that I’m using in the video and see if you can make things work as is. It is CRITICAL you use correctly entered List Names, Display Field Names, and Internal Field names where indicated or it simply won’t work.
Anyway, I hope you like the updates! Thanks once more for stopping by.
You’re totally AWSOME Mark. THANK YOU! This works great even on document library property forms. -Bob
Very nice work for single-choice cascades… Can you put together something for when “Allow multiple values” is set? It works for the initial filtering, but if you remove an item from the choices it allows them ALL to be seen.
Considered doing that, just hard to find the time to make it work for all scenarios.. if you’d like to contract with my company to do this I’d be happy to assign a resource to get it done.
I have the cascading working, but the results are limited to 100 values and not sorted. Any thoughts how I can ensure all of the values are returned and sorted? (I’m parent is company, and child is employee name)
how add the $top parameter to the query?
thanks for your help
You can add it to the end of the REST query in the main JS file.
This is truly awesome. Thanks, Mark. Any chance it could be configured for “quick edit” mode as well?
hmmm… Historically quick edit views are not easy to work with, but I haven’t tried lately… I’ll dig into when I have some time.
Will this work with the new modern experience or just classic?
Just classic
Hi, I have 2 sets of groups, one for countries (3 menus) and the other for company sections (also 3 menus).
apparently like this, it will not work. there is some conflict with 2 groups while selecting.
please assist me in solving it.
I have the same question as Mahmoud. I have 2 groups I’m attempting to utilize this solution for. Unfortunately, when selecting the first, it resets the second. Does anyone have a solution for this?
Mark – wondering if you wouldn’t mind commenting on the following. My colleague used your solution and demo’d it to me and it worked in modern team sites in a modern library. The only thing that happened is that when the item is in edit mode, it reverts back to classic…but upon saving, the library appears in modern mode again. Is this what you mean by “not working” or should we be seeing a different experience?