Click here to Skip to main content
14,644,595 members
Articles » Enterprise Systems » SharePoint Server » General
Tip/Trick
Posted 13 Apr 2014

Tagged as

Stats

161.8K views
63 downloads
10 bookmarked

Two Level Cascading Drop Down in SharePoint 2013 using SPServices

Rate this:
4.74 (9 votes)
Please Sign up or sign in to vote.
4.74 (9 votes)
13 Apr 2014CPOL
How to use cascading dropdown look up 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:

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:

Image 1

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:

Image 2

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
Image 3

Step 3

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

Image 4

Step 4

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

Image 5

Step 5

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

Image 6

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

This figure will explain more than I can...

Image 7

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

Finally the cascading works fine.

Image 8

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Vinoth Kumar
Software Developer Salzer Technologies
India India
No Biography provided

Comments and Discussions

 
GeneralRe: How to make it work on Quick edit mode? Pin
Vinoth Kumar26-Jun-14 18:57
professionalVinoth Kumar26-Jun-14 18:57 
SuggestionHow to implement cascading to n-levels Pin
tarun0019713-Apr-14 19:18
Membertarun0019713-Apr-14 19:18 
GeneralRe: How to implement cascading to n-levels Pin
Vinoth Kumar26-Jun-14 3:16
professionalVinoth Kumar26-Jun-14 3:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.