SharePoint Cascading drop down list using SPServices and jQuery

This SharePoint tutorial, how to implement a cascading dropdown list in the SharePoint list using jQuery and SPServices. In the same way, we can also implement a cascading dropdown list in SharePoint 2013 or SharePoint 2016.

SharePoint cascading drop down list

For Implementing Cascading Drop-Down List in SharePoint List using jQuery and SPServices follow the below steps:

First create a country list like below:

cascading dropdown in sharepoint 2013
cascading dropdown in sharepoint 2013

Then create a State list with Country as lookup column, the lookup settings will come like below:

sharepoint 2013 cascading dropdown jquery
sharepoint 2013 cascading dropdown jquery

Finally the state list should be like below:

cascading dropdown in sharepoint 2013 list
cascading dropdown in sharepoint 2013 list

Select Default New Form under List tab of newly created List CascadeDropDownList

cascading dropdown in sharepoint 2013 document library
cascading dropdown in sharepoint 2013 document library

Add content Editor Web part and Select Edit HTML Source under Format Text Tab

cascading dropdown sharepoint 2010 jquery
cascading dropdown sharepoint 2010 jquery

Then Copy and Paste the below Code in HTML Editor

<script language="javascript" src="/JSLibrary/jquery-1.4.2.min.js" type="text/javascript"></script><script language="javascript" src="/JSLibrary/jquery.SPServices-0.5.7.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
relationshipList: "State",
relationshipListParentColumn: "Country",
relationshipListChildColumn: "Title",
relationshipListSortColumn: "ID",
parentColumn: "Country",
childColumn: "State",
promptText: "Choose State…",
debug: true
});

});</script>

After this it will appear like below:

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

In some scenario we need to implementing cascading type of concept in OOB forms as for example by selecting Countries respective states or cities. It’s not easier in SharePoint.

You may like following SharePoint tutorials:

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>