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 a 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 a 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
