Multilevel Cascading Dropdowns for SharePoint 2013, 2016, and O365 Classic forms




About this tutorial:

Video duration: 9:40
This video walks you through using the script described in my blog at for implementing the cascading dropdown functionality for classic forms in SharePoint. The code can be found on GitHub at

Incoming search terms:

Post Author: OfficeTutes.com

Apple lover, ICT and LEAN consultant, MS Office lecturer My other website with video tutorials - Tutorials, guides and news for iPhones and iPads

34 thoughts on “Multilevel Cascading Dropdowns for SharePoint 2013, 2016, and O365 Classic forms

    Diana Prause

    (May 16, 2019 - 1:44 pm)

    I can get this to work by itself and the tabbed form to work by itself. I've not had success combining the two scripts into a single script that creates a tabbed form with cascading drop-downs. But I'm not a code or SP guru like you.

    Joshua Jepsen

    (May 16, 2019 - 1:44 pm)

    Been working on this for the past few days with no success. I was able to create the state/county/city in the example, but when I tried to create my own topics, i continue to get an error message for the 2nd tier saying the columns are not valid from the list selected. I am 100% sure the columns listed are valid from the identified list.

    TheSeanzeppelin

    (May 16, 2019 - 1:44 pm)

    Hi Mark, wondered if I could seek your help?  I just wondered, i've included another drop down and it's working fine… however, I wondered how I could tweak the script so it just displays the default value of the 4th drop down once I've defined the 3rd dropdown value… at the moment it's just displaying the firstOptionText:, wondered if I could get it to show the linked value?For example:Level 1 = SomethingSelectedLevel 2 = SomethingElseSelectedLevel 3 = LastThingSelectedLevel 4 = Display the value automaitcally linked to Level 3

    TheSeanzeppelin

    (May 16, 2019 - 1:44 pm)

    Mark – great tutorial and this has helped me do what I needed immensely.   Many thanks… keep it up 🙂

    Rene Mannetje

    (May 16, 2019 - 1:44 pm)

    Great script Mark, thanks for this !!!

    WoTpro

    (May 16, 2019 - 1:44 pm)

    Would it be possible to do something similiar with Managed Meta data instead of lists ?

    Della Jacot

    (May 16, 2019 - 1:44 pm)

    Absolutely wonderful!  I am inspired to learn Java scripting.  It was so easy to understand the way you explained.  Thank you.

    Jason Routledge

    (May 16, 2019 - 1:44 pm)

    Hi Mark, I can get the script working with the lists in same site but I'm trying to pull the list from a parent site list and it can't seem to find the parent column.  I've modified the _spPageContextInfo.webAbsoluteUrl to point directly to the parent site and I've created site columns on the parent site including the parent and child lists.  I thought because the list was creating the column name RSC:District it would work but I am getting an expression error when I use the semi-colon in CEWP.js.  Thoughts?

    Rolando Vargas

    (May 16, 2019 - 1:44 pm)

    HI Mark, first of all thanks for sharing this solution with all of us.
    I´m facing a issue when I try to use your code with my fields with only 1 cascading drop down. I´m not getting any error but the child field is not returning any value except the firstOption value.
    This is my scrip
    parentFormField: "Location", //Display name on form of field from parent list

    childList: "Location_List", //List name of child list

    childLookupField: "Title", //Internal field name in Child List used in lookup

    childFormField: "Sub_location", //Display name on form of the child field

    parentFieldInChildList: "Location", //Internal field name in Child List of the parent field

    firstOptionText: "Select Sub location"

    I have a my parent list called "Location_List" with the fields of Location and Sub_location. Any help?

    Apple Dev

    (May 16, 2019 - 1:44 pm)

    Hello Mark,

    thank you for your amazing solution ! Now i have 5 Levels, everything is working finde.
    One question i have. My DropDown has names of Products, and they are approx. 500 of them.
    So my question.. How can I widen the DropDown Items amount? It only shows 100 or so.

    Thanks !!!

    Phénix Energy

    (May 16, 2019 - 1:44 pm)

    I'm new to 365, where is the "Site Assets" directory?

    Roman

    (May 16, 2019 - 1:44 pm)

    HI everyone, hi Mark. Thanks for the vide tuttorial. I've found this being a great tuttorial and followed it step by step. Everything looks fine up to the point I STOP Edditing. when I am adding a new WEb part, type in the path and click OK, the cascading works as it should, but as soon as I click stop edditing, the cascading dissapears. Any help would be appreciated.

    Clive Brandon

    (May 16, 2019 - 1:44 pm)

    Only the first drop down fields is saved, the rest are not saved in the SharePoint list item – what am I doing wrong?

    Susan Cannon

    (May 16, 2019 - 1:44 pm)

    This does not work for me. My parent list (Categories) has only one column, Title. My child list (Process Apps) has only two columns: Title and AppCat. (I have changed the name of the 2nd column and the error is the same no matter what I call it). My CEWP file has:
    cascadeArray.push({

    parentFormField: "Category-LU", //Display name on form of field from parent list

    childList: "Process Apps", //List name of child list

    childLookupField: "Title", //Internal field name in Child List used in lookup

    childFormField: "ProcessTitleLU", //Display name on form of the child field

    parentFieldInChildList: "AppCat", //Internal field name in Child List of the parent field

    And when I run it, i get the following error:
    Error retrieving information from list: Process Apps{"error":{code:"-1,Microsoft.SharePoint.SPException",message":{lang":"en-US","value":"The field or property 'AppCat' does not exist."}}}
    When I change the name of the column, the error repeats the changed name. So I know the code is working.
    Why am I getting this error? Is there some hidden "internal field name" that I need to go find or something? Why isn't it the name that I have given it? Is there something special I need to do with this column in my child list?
    Thank you, Susan

    Susan Cannon

    (May 16, 2019 - 1:44 pm)

    What if the items that I want to show in my dropdown lists are already columns in another list? I want to use List1-Column4 like your "Company name" list, and List1-Column5 for the "Employee" list. I don't want to have to update 3 lists when I update my main table. What do you suggest in this case?

    By the way, each Column in my list can have multiple entries, meaning Company1 Company2 Company2 Company1 exist as entries in my List1-Column4. Is there any way to remove duplicates from the list so only one entry per "Company" shows? Thanks.

    Adrian Baste

    (May 16, 2019 - 1:44 pm)

    Hi, will this work on just a normal list view, not just a "new" item? Anything you can do to help me out with getting it on my list view would be amazing!!!

    Harry Cox

    (May 16, 2019 - 1:44 pm)

    Stupid newbie question. When you created the individual lists, does the 2nd column need to be a lookup field? Example, in your vid you created 3 lists, States, Counties and Cities. In the Counties and Cities lists, you have a second column, is that a lookup field? I know you need them in the Cascade list but do you need them in the individual lists as well?

    Todd Palermo

    (May 16, 2019 - 1:44 pm)

    Hi Mark, I am using SP Foundation 2013 and I have an error when I try to use the HillbillyCascadeCEWP.js file in the Content Editor of my form. The error is: <FORM> tags are not supported in the HTML specified in either the Content property or the Content Link property. You can remove the <FORM> tag, or use the Page Viewer Web Part, which supports the HTML <FORM> tag. The Content property can be modified in the Rich Text Editor or Source Editor. More about the Page Viewer Web Part. Any help would be greatly appreciated!

    Jason Ryan

    (May 16, 2019 - 1:44 pm)

    I agonized over getting this working all morning. Turns out, if the lookup field in the child list has a space in it, it will break. The workaround is in the params for parentFieldInChildList, you need to put '_x0020_' in place of a space. Also the childLookupField needed to be set to 'Title' despite the column being named otherwise.

    Not sure if this is still being updated – but one suggestion I have is to add in an optional parameter to add a limit on the number of list items the ajax call will pull. The current limit is defaulted to 100.

    I hope this helps somebody else struggling to get this work! Otherwise thanks for sharing this great solution.

    p_h s

    (May 16, 2019 - 1:44 pm)

    Hi Mark,

    This is a great tutorial. I managed to get mine done by following the steps given. However, I have a questions:

    How can I remove duplicates in ‘City’ drop down?

    Tracy Drew

    (May 16, 2019 - 1:44 pm)

    Thanks for the great tutorial and the js files, they work excellent!!!! Appreciate it.

    Simon Hill

    (May 16, 2019 - 1:44 pm)

    Great video, thanks Mark. I have the cascading dropdowns working however I only want to use a single cascade. I have edited the original script but keep getting the following error message – Error retrieving information from list: Cities{"error":{"code":"-1, System.ArgumentException","message":{"lang":"en-US","value":"List 'Cities' does not exist at site with URL 'https://someurl&#39;."}}}

    I removed the second section of the script which refers to Cities so am not sure why this error is appearing. Any help would be greatly appreciated.

    Roger Rodríguez

    (May 16, 2019 - 1:44 pm)

    Mark, Thanks a lot for your detailed explanation on Cascading Dropdowns. Really appreciate it. I succeeded creating a random Cascading dropdown list, however, I am now trying to do the same with a Document Library. The plan is to be able to upload files and then categorize these files on categories and sub-categories, limiting the sub-categories option upon the category option that was selected. Do I have to make any modifications to your the .js code you uploaded to github? Thanks!!!!

    Lanre Ogun

    (May 16, 2019 - 1:44 pm)

    Amazing… so simple. thank you for this it is a life saver

    Therese Baker

    (May 16, 2019 - 1:44 pm)

    Mark, you are awesome! Thanks for sharing your solutions. I've reviewed several of them and they are all great.

    Steven Hughes

    (May 16, 2019 - 1:44 pm)

    Thank you. Great job and very informative.

    Dominik Bärtschi

    (May 16, 2019 - 1:44 pm)

    Thank you mark, this is awesome!

    Steve Bernard

    (May 16, 2019 - 1:44 pm)

    Does this solution work in SP2013?  I have implemented the solution exactly and have not been successful.

    Annett Conner

    (May 16, 2019 - 1:44 pm)

    How can I get SharePoint 2013 to let me add all your files to my SiteAssets folder?  .gitxxxxx files are blocked so I can't use any of your forms.

    João Pedro Santiago

    (May 16, 2019 - 1:44 pm)

    Hello, i need to create a cascade dropdown code.
    But i have a problem, the limit of exibithion is 5000, and i have 20k items, my admin says that he will not expand the limit.
    U can help me?
    is a "challenge"..

    Warsong27

    (May 16, 2019 - 1:44 pm)

    Great Video Mark. Many thanks for taking the time and uploading this gem.

    roberta larson

    (May 16, 2019 - 1:44 pm)

    Hello I am not a developer and know very little about Jquery or SharePoint however I am trying to implement the cascading dropdown list. I have made it all the way to testing the link ../../SiteAssets/HillbillyCascadeCEWP.js in the content editor. But I cannot get past here. I click test link and get an error message
    Script:
    C:Userz304679AppDataLocalMicrosoftWindowsTemporary internet filescontent.IE5IFI02FOWHillbillyCascadeCEWP.js
    Line: 1
    Char: 2
    Error Syntex
    Code: 800A03EA
    Source: Microsoft Jscript Compilation error
    Can you help?

    T Taylor

    (May 16, 2019 - 1:44 pm)

    Hi Mark, Thank you for posting this great tutorial. This has really helped me out alot. I have one question. I've added the .js file to default edit form so, it can keep the cascading drop down on the edit form but, it's doesn't work after I close the edit form and reopen. Can you please give me some direction on how to correct the issue… Thanks!

    Maciejf90

    (May 16, 2019 - 1:44 pm)

    Can't find words on how You helped me. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *