Skip to content
June 10, 2011 / red1s

How To – Create a Cascade Dropdown in SharePoint 2010

If you’ve ever need to create a cascade dropdown in SharePoint 2010 you can use the following process to get going

Upload the necessary Jquery Files to your shared folder:

The JQUery files can be download from the following location, depending on which files you need

For this example you’ll need jquery-1.6.2.js (however I have both version in my directory for other purposes)

Make sure this folder is accessible to all users accessing the site


Now create the two lists that you’d need to cascade – (You’ll notice that I’ll be doing a subset of Ireland as my country) – Note if the Title is changed it doesn’t seem to pick up the name of the identifier so I had to create a ‘countries’ column to which I used to identify the column list



Create the list with the required parent child lookups:


Using the Title as the identifier:


Part 2: Editing the New and Edit Pages for the required functionality

Edit the new form by accessing the ribbon list item:


And selecting Default new form from the Form web parts menu


Once in edit mode add a Content Editor webpart


Add the below code into an HTML section of the content editor for the page:

<script language="javascript" src="/Shared%20Documents/Src/jquery-1.6.2.min.js" type="text/javascript"></script>

<script language="javascript" src="/Shared%20Documents/Src/jquery.SPServices-0.0.6.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {


relationshipList: "Hierarchy Levels",

relationshipListParentColumn: "Level",

relationshipListChildColumn: "Description",

parentColumn: "Next Level",

childColumn: "Next Identifier",

debug: true



.csharpcode, .csharpcode pre
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
background-color: #f4f4f4;
width: 100%;
margin: 0em;
.csharpcode .lnum { color: #606060; }



You can use the following litmus test to ensure that your JavaScript code is being picked up:


For further clarification regarding the lookups and mappings see below diagram:



MOSS 2007 SharePoint Cascading drop downs using jQuery

Cascading Dropdown overview using SP Services$().SPServices.SPCascadeDropdowns

MOSS 207 Demo cascading dropdowns

Cascading Drop Down SharePoint Foundation 2010


SP Services Codeplex project

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: