Click here to Skip to main content
13,147,812 members (39,986 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

83.2K views
39 downloads
9 bookmarked
Posted 13 Apr 2014

Two Level Cascading Drop Down in SharePoint 2013 using SPServices

, 13 Apr 2014
Rate this:
Please Sign up or sign in to vote.
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:

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.

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

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionAll Items to be Shown Pin
Member 969874722-Jun-17 3:26
memberMember 969874722-Jun-17 3:26 
QuestionCascading Dropdowns with 2 list Pin
Member 122068227-Sep-16 5:54
memberMember 122068227-Sep-16 5:54 
Question5000 list limit Pin
Member 1263535214-Jul-16 5:00
memberMember 1263535214-Jul-16 5:00 
PraiseDocument Library metadata Pin
Palant643-Feb-16 0:48
memberPalant643-Feb-16 0:48 
Questionfilter for n-n relation and internal/offline sites? Pin
LongTTH30-Jun-15 7:27
memberLongTTH30-Jun-15 7:27 
QuestionCascading dropdown in 2013 foundation? - Child column with multiple selections. Pin
Member 1178869823-Jun-15 23:31
memberMember 1178869823-Jun-15 23:31 
QuestionTwo level Cascading Dropdown Pin
Member 116590362-May-15 3:51
memberMember 116590362-May-15 3:51 
GeneralMy vote of 1 Pin
Syed Mujtaba Hassan18-Dec-14 20:12
memberSyed Mujtaba Hassan18-Dec-14 20:12 
QuestionCascading dropdown using only 2 list Pin
Member 1102454820-Aug-14 2:48
memberMember 1102454820-Aug-14 2:48 
QuestionCascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Zhang Yajiao26-Jun-14 17:06
memberZhang Yajiao26-Jun-14 17:06 
AnswerRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Vinoth Kumar26-Jun-14 19:26
professionalVinoth Kumar26-Jun-14 19:26 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Zhang Yajiao26-Jun-14 19:32
memberZhang Yajiao26-Jun-14 19:32 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Vinoth Kumar26-Jun-14 19:49
professionalVinoth Kumar26-Jun-14 19:49 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Zhang Yajiao26-Jun-14 20:27
memberZhang Yajiao26-Jun-14 20:27 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Vinoth Kumar26-Jun-14 20:56
professionalVinoth Kumar26-Jun-14 20:56 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Zhang Yajiao26-Jun-14 21:53
memberZhang Yajiao26-Jun-14 21:53 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Vinoth Kumar26-Jun-14 22:28
professionalVinoth Kumar26-Jun-14 22:28 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Zhang Yajiao29-Jun-14 22:32
memberZhang Yajiao29-Jun-14 22:32 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Vinoth Kumar30-Jun-14 1:05
professionalVinoth Kumar30-Jun-14 1:05 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Zhang Yajiao30-Jun-14 21:32
memberZhang Yajiao30-Jun-14 21:32 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options Pin
Vinoth Kumar1-Jul-14 3:43
professionalVinoth Kumar1-Jul-14 3:43 
QuestionHow to make it work on Quick edit mode? Pin
Member 1085074028-May-14 12:17
memberMember 1085074028-May-14 12:17 
AnswerRe: How to make it work on Quick edit mode? Pin
Vinoth Kumar26-Jun-14 3:19
memberVinoth Kumar26-Jun-14 3:19 
GeneralRe: How to make it work on Quick edit mode? Pin
Vinoth Kumar26-Jun-14 18:57
memberVinoth Kumar26-Jun-14 18:57 
SuggestionHow to implement cascading to n-levels Pin
tarun0019713-Apr-14 19:18
membertarun0019713-Apr-14 19:18 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170915.1 | Last Updated 13 Apr 2014
Article Copyright 2014 by Vinoth Kumar
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid