Thanks!

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.

116 comments to Cascading Drop Down

  • Rich T

    Hi, great post, worked first time. I just wanted to know if it is possible to filter the lookup from 2 lists.

    I have a Project column lookup pointing to one list and a Deliverable column pointing to another list, and this seems to break the feature. Is this possible?

    Many thanks,

    Rich

  • swapna

    Hi,
    This post is great , but when I implemented nothing worked for me. Im using sharepoint designer 2007. Can you please help me.

  • Dig

    I am unable to edit my NewForm.aspx, i do not have infopath neither sharepoint foundation. I have only sharepoint designer. any help will be highly appreciated..

    thanks

  • If you do not have SharePoint, then this post is not for you;-)

  • Bivek

    I used the code and it is working fine. I want to implement the condition where the selected item should be currently loggedin user(which has to be selected automatically) and his department should be crawled based in parent list column. Please suggest how can i implement this.

  • Bivek

    Is there a way i can use any variable in “parentColumn: “Country”,” ?
    so that the variable represents selected item in the column “country”.

  • Thanks for the post …!

    How can i set default value as ‘Choose City’ in Casacding dll?? please guide me .. thanks in advance!!!

  • SB

    How many sets of dependent dropdowns can be included in one SharePoint list? This works for two sets but, when I add a third, it prevents the first one from working. Is there something different that needs to be done for a 3rd set or does SharePoint not support it?

  • suman

    Thanks..Audun M. Solheim
    Great post indeed…it’s work perfectly, i need to select multiple value in child colum(i.e if I select a country…their cities wii be populate and want to select multiple cities)
    Please any one Help me…………

  • Mike K

    I’m having a issue with the inital drop down select having to be limited to 19 items. If I add a 20th items to the lookup list the function of the cascade drop down stops working.

    Any thoughts or suggestions?

    thanks

    ps..brillant work!

  • SPCascade provides the best JQuery based solution that involves only single master list and supports multi-level dropdowns.

    It is FREE.

    http://www.spcascade.org

  • Soochx

    I have very successfully gotten this jquery approach to work for dynamic drop downs in SP 2007 and SP 2010. And I have it working for both custom lists and document libraries. In SP 2010, there is a new OOTB feature that does dynamic drop downs via customizing the form using InfoPath and requires a content editor web part. It works great with no jquery or Javascript required. However, I have 2 problems I have not been able to locate solutions for.

    1. The SP 2010 capability using a content editor web part and InfoPath to customize the form only works for custom lists, and does not work for document libraries. Apparently, SP 2010 does not support customizing forms in document libraries. Can someone confirm this, or tell me if there are any work arounds for this?

    2. Presuming #1 won’t work for document libraries, I am back to using jquery and Javascript. However, the list that is doing the lookups (my custom list) and that would have the dynamic drop down capability, are using site columns for the lookups, and the lookup lists are NOT in the same site as my custom list (but they are in the same site collection). So the Javascript code,

    $(document).ready(function() {
    $().SPServices.SPCascadeDropdowns({
    relationshipList: “Cities”,
    relationshipListParentColumn: “Country”,
    relationshipListChildColumn: “Title”,
    parentColumn: “Country”,
    childColumn: “City”,
    debug: true
    });

    references the “relationshipList” and this works if that list is in the same site as my custom list. But when it exists in another site (higher up in the site hierarchy), how does that work? Is there a way to fully qualify the path to the relationshipList? For example,something like,

    relationshipList: “/sites/aaa/bbb/Cities”,

    Besides using site columns, I have never been able to access a list that exists in a different site (yet within the same site collection).

    Appreciate any help with this. Thanks.

    Soochx

  • Saida

    Hi I used same code for cascade drop down list. It’s working fine. But it is not saving the data into list. While saving new form.aspx it giving Error. Please Help on This.

    Thanks,
    Saida.

  • aslam

    go to this link http://www.spcascade.org and follow the mentioned steps…it is working

  • Thank you very much for this! Great documentation on cascading drop-downs. In case anyone was wondering, this does work in SharePoint 2013! I’ve been doing research for a day and a half, and this is by far the best write up on this process. Two thumbs up!

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>