SharePoint Cascading Lookup (3 Different Ways)

In this SharePoint tutorial, let us discuss how to implement SharePoint cascading lookup. We will see two different ways to implement cascading dropdown in SharePoint online list.

Another way we will see how to implement SharePoint cascading lookup in modern SharePoint sites using KWizCom App ( 3rd party tool)

We will also see how to implement sharepoint online cascading dropdown list using jQuery.

SharePoint cascading lookup

Let us see what is SharePoint cascading lookup and how it looks like.

Here I have 3 SharePoint lists like below:

• Employee Country
• Employee State
• EmployeeInfo

The Employee Country list is having one Title columns and the custom list looks like below:

The other list I have created as Employee State which has two columns like:

• Title
• Country: It is a lookup column to the Employee Country list to the above list.

You can see the lookup column like below:

And below is the 3rd list and that is EmployeesInfo. This is a custom list having 3 columns:

• Title
• Country – Lookup column with the Employee Country List
• State – Lookup column with Employee State list.

You can see the lookup column settings like below:

Here is what the Country lookup column looks like below. The information is from Employee Country (Title) column.

The State lookup column looks like below and the information are from Employee State (Title column)

Now when trying to add an item to the SharePoint list, You can see the Country and State dropdown. By default when the user will select a Country, then the corresponding States will get populated.

This is how the SharePoint cascading lookup column works. Let us see how to implement SharePoint cascading lookup.

Now, let us see first how to implement SharePoint cascading lookup using SPServices.

SharePoint cascading lookup using SPServices

Note: The solution will work in a classic web part page in SharePoint Online or SharePoint 2019/2016/2013. It will not work in a modern SharePoint Online site.

Let us now see, step by step, how to implement cascading lookup using SPServices in SharePoint Online. In the same way, it will work in SharePoint 2019/2016/2013 also.

Step-1:

Open the SharePoint Online list, from the ribbon, click on the LIST tab, click on Form Web Parts -> Default New Form.

Since, I want to implement in New form I choose Default New Form, if you want to edit then choose Default Edit Form.

Step-2:

In the Default New Form, Click on the Settings icon -> Edit page like below:

This will open the page in edit mode. Here click on Add a Web Part, Choose Media and Content web part categories, and then select Script Editor web part.

In the script editor web part, click on Edit Snippet, and add the below 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>
$(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Employee State",
   relationshipListParentColumn: "Country",
   relationshipListChildColumn: "Title",
   parentColumn: "Country",
   childColumn: "State"
  });
 });
 </script>

Here we need to refer the jQuery and the SPServices file like above.

• relationshipList: This is the Employee State which contains the State and Country names.
• relationshipListParentColumn: This is the filter column name from the Employee State list.
• relationshipListChildColumn: This is the Title of the Employee State list.
• parentColumn: This is a Country column in the EmployeesInfo list
• childColumn: This is the State column in the EmployeesInfo list

Now, once you Save the code and click on + add new item, you can see sharepoint cascading lookup will work as expected.

Here you can see If I select Country as USA, then corresponding states are populating in the State dropdown.

If I will select any other Country, it will auto populate corresponding states like blow:

This is how to implement sharepoint cascading lookup using SPServices.

SharePoint cascading lookup using KWizCom App

Let us see another approach how to implement cascading lookup in SharePoint Online modern list using KwizCom app.

I have also created a video tutorial, check out below:

KWizCom App

KWizCom is a 3rd party company that provides lots of very useful web parts or apps. The apps can be used without having much technical knowledge.

Then have various products for SharePoint Online as well as for SharePoint on-premise versions. But here we will see, how to use KWizCom Microsoft 365 Cascading lookapp.

Configure KWizCom Cascading lookapp

Here we are going to use the below lists:

• Employee Country – Follow the above section
• Employee State – Follow the above section
• Employee Detail

Make sure to install the KWizCom forms modern app before proceeding further.

Here, we will see how to configure KWizCom Cascading lookapp with the Employee Detail list

By default the list is having only the Title column. We will add and configure two look up columns.

Open the SharePoint Online modern list, from the command bar click on KWizCom Apps. Then it will display all the Apps, there select Cascading LookAPP. Here, provide a column name.

Here we will first create the Employee Country Name. Here we want to display the countries from the Employee Country list.

Then in the Lookup Information, choose the below things:

• Target site: Choose the current site
• Target list: Choose the Employee Country list
• Target column: Choose the Title column

Leave the other things as it is. You can see it looks like below:

Save the configuration page. Now, only you open the New Item page, you can see lookup column is added to the list and you can see it also populate the Countries like below:

Now, we will add the other SharePoint lookup column.

Again go to the same page, Here, provide a name in Configure this column and in the Lookup Information, choose:

• Target site: Current site
• Target list: This time choose the Employee State list.
• Target column: Choose Title as Title column contains the state names.

Since we want to filter the state names based on the country.

Here, in the Filter Settings, choose the below things:

• Filter by a column in this list: Choose the previous lookup column that we created. Because based on the country selected from this dropdown, we are going to filter the States.
• Show only options where Employee Country Name = : Here choose the Country column like below:

Leave the rest things as it is. Save the configuration wizard.

Now, when you try to add an item to the SharePoint Online modern list, the list form looks like below. By default the Employee Country Name dropdown will have all the countries.

Now, when you select a country, corresponding states will be populated. You can see below:

This how to implement sharepoint cascading lookup using KWizCom App.

In this SharePoint tutorial, we learned how to implement sharepoint cascading drop down list and SharePoint cascading lookup.

This SharePoint 2013 or Online tutorial explains how to implement cascading dropdown in SharePoint 2013/2016/Online using jquery.

Cascading dropdown in SharePoint using jQuery

Now, let us see, how to implement cascading dropdown in SharePoint 2013/2016/2019 or SharePoint Online using jquery.

Here I have a SharePoint list known as Cities and it has a State column which is a lookup column from State list. My requirement here is when a user selects a State from the state dropdown list, corresponding cities should populate in another dropdown list.

We will see here how to do this cascading dropdown in SharePoint 2013 using jquery or JavaScript.

Here, follow the example step by step.

Step-1:

Below is the States List which has few Stated added already in SharePoint Online site.

Step-2:

Below is the Cities list, which has State a lookup column.

Below is how you can Create a State column in Cities list as Lookup.

From the ribbon click on Create Column and then give the name for the column as State. Choose the data type as Lookup. Select list from -> Get Information From States(Parent list)where we can get list items and Next select Column -> go to In This Column: Title

Step-3:

Now, Create a third list Where you want to implement cascading dropdown, in my case I created list CascadingDropDown as shown below.

Create a State and City as Lookup Columns.

Step-4:

Down Load Jquery from below links.

• Download the jquery-3.3.1.min.js by Jquery.com, from the below link https://code.jquery.com/jquery-3.3.1.min.js

Step-5:

Upload JQuery file in your SharePoint Document Library. Find Highlighted jQuery library file.

Step-6:

Copy the URL  and place in Seatle.master page of Master Pages in SharePoint Designer 2013. Follow the below screenshots how and where to add url in Seatle.master page.

Click on the master page and next go to Seatle.master page, click on it. Next Go to the Customization tab, under Links to file customization tools click on Edit file.

Copy the URLs and paste it in Seattle.master page.as shown below and save it.

<script type="text/javascript" src="/sites/MyTeamSite/Shared%20Documents/jquery-3.3.1.min.js"></script>

Step-7:

Copy and Paste this code in your js file. I have given file name as JQueryCscDD.js.

Here is the Script for SharePoint 2013/online.

<script type=”text/javascript”>
$(document).ready(function() {
CascadingDropDown({
parentFormField: “State”,
childList: “Cities”,
childLookupField: “Title”,
childFormField: “City”,
parentFieldInChildList: “State”
});
});
function CascadingDropDown(params)
{
var parent = $(“select[Title='”+params.parentFormField+”‘], select[Title='”+
params.parentFormField+” Required Field’]”);
$(parent).change(function(){
JQCascadingDropDown(this.value,params);
});
var currentParent = $(parent).val();
if (currentParent != 0)
{
JQCascadingDropDown(currentParent,params);
}
}
function JQCascadingDropDown(parentID,params)
{
var child = $(“select[Title='”+params.childFormField+”‘], select[Title='”+
params.childFormField+” Required Field’],” +
“select[Title='”+params.childFormField+” possible values’]”);
$(child).empty();
var options = “”;
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + “/_api/Web/Lists/GetByTitle(‘”+params.childList+
“‘)/items?$select=Id,”+params.childLookupField+”,”+params.parentFieldInChildList+
“/Id&$expand=”+params.parentFieldInChildList+”/Id&$filter=”+params.parentFieldInChildList+
“/Id eq “+ parentID,
type: “GET”,
dataType: “json”,
headers: {
Accept: “application/json;odata=verbose”
}
});
call.done(function (data,textStatus, jqXHR){
for (index in data.d.results)
{
options += “<option value='”+ data.d.results[index].Id +”‘>”+
data.d.results[index][params.childLookupField]+”</option>”;
}
$(child).append(options);
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert(“Error retrieving information from list: ” + params.childList + jqXHR.responseText);
$(child).append(options);
});
}
</script>

Step-8:

Upload the JQuery file into your SiteAssets. follow the below screenshots. Go to Settings -> click on Site Contents

In Site Contents page -> go to Site Assets document library.

Upload js file in Site Asset Library in SharePoint 2013/2016/2019.

Step-9:

Go to the Third list we created as CascadingDropDown list -> go to list tab -> Select Default New Form under FormWebParts

Click on Default New Form and next click on Add WebPart. Select Content Editor Web Part From Media And Content WebPart under Categories as shown below.

Next Click on Edit Web Part from the content web part and there add URL of the js file from Aite Assets and click on ok button.

Step-10:

Go to the CascadingDropDown list, Click on New Item.

Now enter the title and Select State from the drop-down.

Now it only displays the Cities as shown below. Next click on save.

See the selected Items added in the List.

This is how to implement cascading dropdown in SharePoint 2013/2016/2019/Online using jquery.

You may like the following SharePoint tutorials:

• How to add calendar to modern SharePoint page (2 easy ways)
• Page viewer web part in SharePoint Online
• PowerApps Cascading Dropdown
• Create and Deploy a custom theme in SharePoint Online
• Disable document edit properties based on user permission in SharePoint document library
• SharePoint Carousel Example
• How to uncheck add as a new version to existing files in SharePoint Online

In this SharePoint tutorial, we learned 3 different ways to implement cascading drowpdown in SharePoint.

• sharepoint cascading lookup using spservices
• sharepoint cascading drop down list using KWizCom Apps
• sharepoint online cascading dropdown using jQuery