Project Description
Create one or more cascaded lookup dropdowns in a SharePoint form. Easy setup, no GAC or server backend deployment needed. Works in IE and FF, supports lookups with 19- and 20+ items.

More info and detailed setup instructions with screenshots can be found here

An example of working cascaded dropdowns (Deployment/setup and example follow):




Deployment is simple:
1. Upload JavaScript file to your SharePoint site (any document or master page library)
2. in IE open the SharePoint form where you want to implement cascading dropdowns
3. Insert a Content Editor WebPart into the page after the form (how? Instructions here)
4. Edit properties of the webpart and edit its source code.
5. Link Script to the page

  <script type="text/javascript" src="[path_to_your]/spcd.js"></script>

6. Add a JavaScript block with configurations

  <script type="text/javascript">
    var ccd1 = new cascadeDropdowns(ParentDropDownTitle, ChildDropDownTitle, Child2ParentFieldIntName, ChildListNameOrGuid, ChildLookupTargetField);

Let me explain the new cascadeDropdowns parameters:
ParentDropDownTitle: The display name of the parent lookup field (source for filter)
ChildDropDownTitle: The display name of the child lookup field (the one being filtered)
Child2ParentFieldIntName: The internal name of the lookup field in Child list that is getting values from parent list
ChildListNameOrGuid: The display name or GUID of the child list (from where the child dropdown is getting items)
ChildLookupTargetField: The internal name of the field the child dropdown is displaying values of


Say we have 3 lists:
1. Account list with account names in "Title" column.
2. Branches list with
- Branch name in "Title" column and
- a lookup to Account list "Title" column called "Account"
3. Which ever list that has
- a lookup to Account list "Title" column called "Account" and
- a lookup to Branches list "Title" column called "Company"

The entire setup JavaScript in the third list's NewForm.aspx and EditForm.aspx would be:

  <script type="text/javascript" src="/sys/cascadingDropDowns.js"></script>
  <script type="text/javascript">
    var ccd1 = new cascadeDropdowns("Account", "Company", "Account", "Branches", "Title");

to add a secondary cascade, just add

var ccd2 = new cascadeDropdowns("Company", "Contact", "Company", "Contacts", "FullName");

Last edited Feb 16, 2010 at 9:05 PM by gomiunik, version 7