Click here to Skip to main content
Click here to Skip to main content

Tagged as

Two Level Cascading Drop Down in SharePoint 2013 using SPServices

, 13 Apr 2014 CPOL
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
Follow on   LinkedIn

Comments and Discussions

 
QuestionCascading dropdown using only 2 list PinmemberMember 1102454820-Aug-14 3:48 
QuestionCascadeDropdowns not work with parentCoulmn that has more than 20 options PinmemberZhang Yajiao26-Jun-14 18:06 
AnswerRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinprofessionalVinoth Kumar26-Jun-14 20:26 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinmemberZhang Yajiao26-Jun-14 20:32 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinprofessionalVinoth Kumar26-Jun-14 20:49 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinmemberZhang Yajiao26-Jun-14 21:27 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinprofessionalVinoth Kumar26-Jun-14 21:56 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinmemberZhang Yajiao26-Jun-14 22:53 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinprofessionalVinoth Kumar26-Jun-14 23:28 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinmemberZhang Yajiao29-Jun-14 23:32 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinprofessionalVinoth Kumar30-Jun-14 2:05 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinmemberZhang Yajiao30-Jun-14 22:32 
GeneralRe: CascadeDropdowns not work with parentCoulmn that has more than 20 options PinprofessionalVinoth Kumar1-Jul-14 4:43 
QuestionHow to make it work on Quick edit mode? PinmemberMember 1085074028-May-14 13:17 
AnswerRe: How to make it work on Quick edit mode? PinmemberVinoth Kumar26-Jun-14 4:19 
GeneralRe: How to make it work on Quick edit mode? PinmemberVinoth Kumar26-Jun-14 19:57 
SuggestionHow to implement cascading to n-levels Pinmembertarun0019713-Apr-14 20:18 
GeneralRe: How to implement cascading to n-levels PinmemberVinoth Kumar26-Jun-14 4:16 

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

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

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