Cascading Dropdown In SharePoint 2010 using SPService - Drop Down Multiple Levels

I have received quite a few request on how to set up cascading drop downs with more than two levels after my previous posts on the subject, so I made this post on how to set up cascading drop down with three levels. Actually you should be able to have as many levels as you like. This post is written for Sharepoint 2010 (both Foundation and server), but you should be able do use the same procedure for Sharepoint 2007.

The solution
The lists are standard Sharepoint, which gives great flexibility and stability. This way, the filtering is done in the forms for creating and editing elements. Because of this, you don’t even have access to the server to implement this.

1. Add the Jacascript
Download the Jquery file jquery-1.7.2.min.js by Jquery.com. Download jquery.SPServices-0.7.1a.zip from the Jquery Library for Sharepoint Codeplex site (newer version is probably also OK). Upload jquery-1.7.2.min.js and jquery.SPServices-0.7.1a.min.js (from the zip file) to a document library that everyone accessing your site has access to (a library on the top level site can be wise).

2. Create your relationship lists
Make three lists. In this example I use the Custom List template as basis for the list, but basically you should be able to use any list type you want. The parent list (Country) has only one field, the default Title.

Countries list:

The child list (Cities) has one field in addition to the Title field; the Country field. This is a lookup field from the Countries list.

Cities list:

The grandchild list (Hotels) has a Title field and a City field. The City field is a lookup field from the Cities list.

Hotels list:

The look up fields can also be standard single line of  text column. If your list is really huge, or you are having performance issues, this might be an idea.  You must of course be precise when filling out the County column so that the values here matches the ones in the Countries list if using text fields.

3. Create the list that is actually using the Drop Down

Vacation Plans list:

This is the list where I want my Cascading Drop Downs. Country, City and Hotel are lookup columns against Countries, Cities and Hotels lists. The lookups goes against the title field in the respective columns.

If you change the name of your column later on, you must remember to use the original name in the code below. The internal name does not change if you change a column name, for example change the Title column to be called Vacation.

4. Make the magic happenIn Sharepoint Designer, create your own NewForm.aspx (or EditForm.aspx, you’ll need both if you want it to work when editing items). I assume you know how to do this, but to explain it very short: Open the site in Sharepoint Designer. click “Lists and Libraries” in the left pane. Click the Vacation Plans list to open it. Click “New…” in the Forms sections. Choose “New Item form” and check “Set as default form for the selected type”. click the name of the form you just created to open it. To be able to edit the form like you want to, click the Advanced Mode button in the ribbon. Now you will insert some markup:

Just below

insert this code:

Save and create a new item using your new form:

Voila!

5.Explained:
relationshipList: “Cities” : this is the name of the relationship list = the list containing parent and child
relationshipListParentColumn: “Country” : Column name from the Cities list
relationshipListChildColumn: “Title” : Column name from the Cities list
relationshipListSortColumn: “Title”: This is optional, and is used to choose which column the values in the drop down should be sorted by. In this case, the “City” dropdown will be sorted alphabetically based on the Title field of the Cities column
parentColumn: “Country”: Column name from the list where the drop down is = Vacation Plans childColumn: “City”: Column name from the list where the drop down is = Vacation Plans

The same logic goes for the City-Hotel filtering.

NB! When I say you should follow this guide exactly if you are having trouble, I mean exactly. For example, if you switch order of the two links to the Jquery-files, eg. place the line with jquery-1.7.2.min.js after jquery.SPServices-0.7.1a.min.js,  it won’t work!