You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Implement Cascading Dropdown in SharePoint list


In this article, we will see how to implement a cascading dropdown in the SharePoint list using SP services.  

What’s cascading dropdown?  

The selection of the parent dropdown list causes a child drop down list to be populated with related items to the parent.  

The following steps to create cascading drop down list  

Step 1 : First, we need to create lists that we need.  

Create list called “TripZone”   

Click Site contents  

Select New -> List and click on it .  

Named the list “TripZone 

The first list has only the TripZone information (contains only one column) and finally the list is like below.  

We need to follow the above steps to create a second list (Area). This list contains two columns and one of the columns we added as lookup field (TripZone)  

Now, create a third list named “Trips” like above. This list contains two lookup columns.  

TripZone – Get Tripzone information from Tripzone list and select Title as the source code of the column  

Then, add the second lookup, Get area from information form Area list, as per the screenshot below.  

The list is called “Trips” and looks like the below screenshot.   

Step 2 :  

Go to -> Trips list -> Under list tab -> Select -> “Default New Form  

Add “Script editor” into the form 

Click on Edit snippet    

Step 3 :  

Add the below code.  

Code :  

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>   

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js”></script>    

<script type=”text/javascript”>   

$(document).ready(function ()   

{   

    $().SPServices.SPCascadeDropdowns(   

    {   

        relationshipList: “Area”,   

        relationshipListParentColumn: “TripZone”,   

        relationshipListChildColumn: “Title”,   

        parentColumn: “TripZone”,   

        childColumn: “Area”,   

        debug: true   

    });   

});   

</script>    

Click ok and test the functionality. It will start working.  

When you select the TripZone as “Vayalur”, it will fetch the areas related to Vayalur 

Reference :  

1.https://www.codeproject.com/Tips/758909/Two-Level-Cascading-Drop-Down-in-SharePoint-using