Cascading Dropdown in SharePoint List using jQuery

This article explains how to create a cascading Dropdown in a SharePoint List using jQuery. SharePoint doesn’t provide any way to do cascading dropdowns in list forms out-of-the-box.

A few examples of how this could be used are, to filter countries based on contents selected, filtering City based on Country, filtering departments based on divisions, filtering parts based on the model a vehicle and many more.

Here is the step-by-step implementation of one-level and two-level cascading of a dropdown list in SharePoint.

One-Level Dropdown Cascading:

Use the following procedure.

Two custom lists (one for the continent and another one for the country).

Continent List:

Country List:

Document Library where to save your code:

SPSServices jQuery (you can download it from here: http://spservices.codeplex.com/releases)

<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery.SPServices-0.7.1a.min.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function () {
$().SPServices.SPCascadeDropdowns({
relationshipList: "Country", relationshipListParentColumn: "Continent", relationshipListChildColumn: "Title", parentColumn: "Continent", childColumn: "Country", debug: true

});

});</script>

Document Library or list that will use the preceding created custom lists (I am using World Location):

Two Level Dropdown Cascading:

Further, for two levels add another List (City).

Code:

<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery.SPServices-0.7.1a.min.js"></script>
<script language="javascript" type="text/javascript"> $(document).ready(function () {
$().SPServices.SPCascadeDropdowns({ relationshipList: "Country", relationshipListParentColumn: "Continent", relationshipListChildColumn: "Title", parentColumn: "Continent", childColumn: "Country", debug: true });
$().SPServices.SPCascadeDropdowns({
relationshipList: "City",
relationshipListParentColumn: "Country",
relationshipListChildColumn: "Title",
parentColumn: "Country",
childColumn: "City",
debug: true
});
});</script>

</script>

The final Two Level Cascading is as below:

You may like following SharePoint tutorials:

• SharePoint Calculated Column to display duration between two dates in Hour-Minute
• SharePoint list and library operations using csom
• Change Layout of a Page in SharePoint 2013
• Enable Design Manager in SharePoint Team Site
• http error 503. the service is unavailable in SharePoint 2013/2016

This tutorial, we learned how to do cascading dropdown in sharepoint list using jquery.