Implement Cascading Dropdown in SharePoint list

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

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 

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Mobile Responsive Testing

Mobile Responsive Testing is simply a Testing Process performed to make sure that your website or an app is working appropriately on all types of devices.
Whether it an app or website, they need to ensure that they are accessible from any device, anytime, anywhere.

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.