Cascading dropdown in SharePoint 2013/2016/Online using jQuery

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

Cascading dropdown in SharePoint

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.

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

Upload js file in Site Asset Library in SharePoint 2013.

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 2010
how to create a cascading drop down list in SharePoint 2010
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 of Odisha 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

You may like following jsom SharePoint tutorials:

I hope this SharePoint Online tutorial explains to you, how to implement cascading dropdown in SharePoint 2013/2016/Online using jquery.

>