Cascading Drop Down

The request for Cascading Drop Down, filtered drop down, dependent drop down or what you call them is one of the most common requirements from customers. This rather basic functionality is surprisingly not implemented in either WSS 3.0 or MOSS 2007.

Update: This also works in Sharepoint Foundation (2010). I have created a new post for 2010 here.

What is Cascading Drop Down?
You have two columns in your Sharepoint list, Country and City. Both are lookup/drop down columns. When you choose a country in the Country Drop Down, you only want to see the cities in this country available in the City Drop Down column. This of course makes life easier for the end user, and improves data quality.

Solutions en masse
There are however lots of solutions for this. Datacogs’ Cascading Drop Down is well-known, and various improved versions like SharePoint Cascading Drop Down List (With Filter) Field Type and Query Based Lookup Field Control (Custom field controls), both on Codeplex. These are all free, you can also find solutions out there you have to pay for. I have tried several of these, however good work these guys are doing making this for free, there are some issues that keeps me from using them, like annoying page refresh, creating lots of versions of the list element and the general problems you can get with restore/moving/upgrading data that is not standard Sharepoint.

The solution
Instead, I have used this solution with success. The list is still 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. I have used this solution both in document libraries and in regular Sharepoint lists.

1. Add the Jacascript
Download the Jquery file jquery-1.3.2.min.js by Jquery.com. Download jquery.SPServices-0.4.8.zip from the Jquery Library for Sharepoint Codeplex site (newer version is probably also OK). Upload jquery-1.3.2.min.js and jquery.SPServices-0.4.8.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 two lists, one for the parent (Country) and one for the child (City):

Countries list:

Cities list:

The Country column can be a look up from the Countries list, but you can just as well use a standard single line of  text column. This can theoretically give better performance, but you must of course be precise when filling out the County column so that the values here matches the ones in the Countries list.

3. Create the list using the Drop Down

Vacation Plans list:

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

4. Make the magic happen
In Sharepoint Designer, create your own NewForm.aspx (or EditForm.aspx, you’ll need both if you want it to work when editing items). If you don’t know how to do this, I’ll probably post a tutorial later. Tip: don’t edit the existing forms, but copy them and assign them as default forms.

Just below
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

insert this code:

<script language="javascript" type="text/javascript" src="/address to document library/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/address to document library/jquery.SPServices-0.4.8.min.js"></script>
<script language="javascript" type="text/javascript">
 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Cities",
   relationshipListParentColumn: "Country",
   relationshipListChildColumn: "Title",
   parentColumn: "Country",
   childColumn: "City",
   debug: true
  });

 });
</script>

Save and create a new item using your new form:

Voila!

5.Explained:
relationshipList: “Cities” : this is the name of the relationsship list = the list containing parent and child
relationshipListParentColumn: “Country” : Column name from the Cities list
relationshipListChildColumn: “Title” : Column name from the Cities list
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

You have lost of other options explained at the project site on Codeplex like sorting, multiple levels and so on.

Thanks to Marc D. Anderson for making this available.

Updated: The Jquery files is now updated by Marc D. Anderson to support also multiple select in non-english languages without having to tweak anything. Thanks  to Jasmine Garry and Marc D. Anderson for this update.