Two Level Cascading Drop Down in SharePoint 2013 using SPServices

Introduction

Today, I am going to explain about how to use cascading dropdown look up in Sharepoint 2013 using SPServices. I will start off with an example.

Cascading Dropdown Example

One dropdown content display depend on its parent one, that is called cascading dropdown. For example, consider the above application form, here the Country displays depend on the selected Region.

Now we are going to implement this into SharePoint 2013 from scratch.

Video tutorial:

• https://www.youtube.com/watch?v=Q0L9cnSvVjA

Step 1

In this step, we are going to create 3 custom lists.

List 1

The first list contains only the countries (which contains only one column), so I am giving name of this list as Country. The final figure of that list looks like below:

List 2

The second list's name States which contains two columns:

• Column 1: states
• Column 2: look up of country list

The final figure of that list looks like below:

List 3

This list contains 3 columns:

• Column 1: Anything you want, in my case, I am using default one Title
• Column 2: It's a look up column choosing from country's Title column
• Column 3: It's also a look up column choosing from states' Title column

Step 3

Now open this site in SharePoint designer and open seattle.master page in advanced mode (click advanced mode from home ribbon).

Step 4

Add the jquery and spservices library on seattle.master page (please follow the diagram):

Step 5

Add the spservices script into new form and edit form of test list:

Then save it... and open in your browser. You can get the cascading dropdown....

This figure will explain more than I can...

That's it. It's done...

Finally the cascading works fine.