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:

sharepoint cascading lookup
sharepoint cascading lookup

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.
sharepoint cascading drop down list
sharepoint cascading drop down list

You can see the lookup column like below:

sharepoint cascaded lookup dropdowns
sharepoint cascaded lookup dropdowns

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.
sharepoint cascading drop down list with filter
sharepoint cascading drop down list with filter

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.

sharepoint cascading drop down list
sharepoint cascading drop down list

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

sharepoint 2013 cascading drop down list
SharePoint 2013 cascading drop down list

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.

sharepoint 2013 cascading dropdown
sharepoint 2013 cascading dropdown

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.

cascading dropdown in sharepoint list
cascading dropdown in sharepoint list

Step-2:

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

cascading dropdown in sharepoint online
cascading dropdown in sharepoint online

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.

cascading dropdown in sharepoint 2013
cascading dropdown in sharepoint 2013

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
cascading dropdown in sharepoint 2016
cascading dropdown in sharepoint 2016

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.

sharepoint online cascading lookup
sharepoint online cascading lookup

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

sharepoint 2013 cascading lookup
sharepoint 2013 cascading lookup

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.

sharepoint 2016 cascading lookup
sharepoint 2016 cascading lookup

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:

sharepoint 2019 cascading lookup
sharepoint 2019 cascading lookup

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:

sharepoint 2013 cascading lookup column
sharepoint 2013 cascading lookup column

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.
cascading lookup in sharepoint
cascading lookup in sharepoint

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:
cascading lookup in sharepoint online
cascading lookup in sharepoint online

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.

cascading lookup in sharepoint 2013
cascading lookup in sharepoint 2013

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

sharepoint cascading lookup
sharepoint cascading lookup

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.

CascadingDropDown for sharepoint2016 using Jquery
CascadingDropDown for sharepoint2016 using Jquery

Step-2:

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

CascadingDropDown for sharepoint2013 using Jquery
CascadingDropDown for sharepoint2013 using Jquery

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

CascadingDropDown for sharepoint2010 using Jquery
CascadingDropDown for SharePoint 2010 using Jquery
cascading dropdown in sharepoint 2016 using javascript
cascading dropdown in SharePoint 2016 using javascript

Step-3:

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

cascading dropdown in sharepoint 2013 using javascript
cascading dropdown in SharePoint 2013 using javascript

Create a State and City as Lookup Columns.

cascading dropdown in sharepoint 2010 using javascript
cascading dropdown in SharePoint 2010 using javascript

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.

sharepoint 2016 cascading dropdown jquery
sharepoint 2016 cascading dropdown jquery

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.

 sharepoint 2013 cascading dropdown jquery
SharePoint 2013 cascading dropdown jquery

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.

sharepoint 2013 cascading dropdown jquery
sharepoint 2013 cascading dropdown jquery

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>
cascading dropdown jquery using sharepoint 2016
cascading dropdown jquery using sharepoint 2016

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

cascading dropdown jquery using sharepoint 2013
cascading dropdown jquery using sharepoint 2013

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

cascading dropdown jquery using sharepoint
cascading dropdown jquery using sharepoint

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

how to create a cascading drop down list in sharepoint 2016
how to create a cascading drop down list in SharePoint 2016

Step-9:

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

how to create a cascading drop down list in sharepoint 2013
how to create a cascading drop down list in SharePoint 2013

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.

how to create a cascading drop down list in sharepoint 2019
how to create a cascading drop down list in SharePoint 2019
sharepoint 2013 cascading dropdown in jquery
SharePoint 2013 cascading dropdown in jquery

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.

 cascading dropdown in sharepoint 2013 using spservices
cascading dropdown in SharePoint 2013 using SPservices
sharepoint 2013 cascading dropdown by using jquery
sharepoint 2013 cascading dropdown by using jquery

Step-10:

Go to the CascadingDropDown list, Click on New Item.

cascading dropdown in sharepoint 2013 using jquery
cascading dropdown in sharepoint 2013 using jquery

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

 sharepoint 2013 cascading dropdown by jquery
sharepoint 2013 cascading dropdown by jquery

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

 sharepoint 2013 cascading dropdown using jquery
sharepoint 2013 cascading dropdown using jquery

See the selected Items added in the List.

sharepoint 2013 cascading dropdown by using the jquery
SharePoint 2013 cascading dropdown using jquery

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

You may like the following SharePoint tutorials:

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
>