Cascading Drop down In SharePoint Lists using jQuery

Out-of-the-box SharePoint doesn’t provide a way to cascade drop downs in list forms. Luckily, jQuery provides a way to implement cascading drop downs in SharePoint list forms. Here is the step by step implementation guide:

We need to have two more lists to implement this. Let’s say:

List 1: Parent list, say: Country

cascading drop down sharepoint

List 2: Child list, say: Cities

cascading dropdown sharepoint list

List 3: Our target list, where we are going to implement the Cascading drop down.

vacation

So, Now:

1. Download the jquery-1.3.2.min.js by Jquery.com, from the below link
 http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js

2. Download spservices (jquery.SPServices-0.5.6.min.js) from the link: http://sympmarc.github.io/SPServices/

3. After downloading, upload these two files in a document library

4. In SharePoint Designer, create your own NewForm.aspx (and EditForm.aspx)

Search for this line in source code

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

And insert the following code, Just below the above line:

<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>

Here:

  • 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

Cascading drop down example- What you will get as output is:

Cascading Drop down in SharePoint List Forms using jQuery

Verified that, cascading drop-down list method works on both SharePoint 2007 and SharePoint 2010.

Here is my another post on cascading drop down in SharePoint Online: SharePoint Online: Cascading drop-down list using jQuery

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

11 thoughts on “Cascading Drop down In SharePoint Lists using jQuery

  • December 5, 2017 at 8:46 AM

    Hi how can i use this to list quick edit mode

    Reply
  • October 9, 2017 at 8:57 AM

    Hi, thanks for sharing your experience, it only works with Chrome and Edge and not with IE11, any suggestions?

    Reply
  • April 21, 2015 at 4:35 PM

    Any suggestions on how to populate a 3d level cascading dropdown that has values based on teh 1st and 2d dropdowns? Marc Anderson said that SPCascade Dropdown CAML query won’t work for this instance.

    Reply
  • April 3, 2014 at 8:08 AM

    Hi ,I want to perform cascading among 4 fields in a nintex form.Can u help me.

    Reply
    • April 3, 2014 at 9:38 AM

      Nintex has published a white-paper on this: http://connect.nintex.com/files/folders/tutorials_and_how_tos_nf2010/entry20327.aspx

      Reply
  • March 4, 2013 at 12:00 PM

    The script works fine except when clicking on Submit button I get an unexpected error page…

    Reply
  • January 24, 2013 at 7:51 PM

    Why does this script make customized button redirects no longer work?

    Reply
  • April 12, 2012 at 3:57 PM

    How fabulous this is, thanks for sharing, as for the last comment if you go to the website which its linked to you can see it in action and imitate this, thanks for this snippet of useful info
    Kris

    Reply
  • October 18, 2011 at 11:19 PM

    Really love how everyone puts up this example but does not include the part after on how to get that value into the SharePoint list. This example only gives you the cascading drop down and does not populate the actual SharePoint list.

    Reply

Leave a Reply