Search This Blog

Monday, November 30, 2015

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

So, Now:
Insert the following code: Just below

<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

1. Download the jquery-1.3.2.min.js by Jquery.com, from the below link

2. Download spservices (jquery.SPServices-0.5.6.min.js) from the codeplex link

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

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


Cascading drop down example- What you will get as output is:
Cascading Drop down in SharePoint List Forms using jQuery
Verified that, cascading dropdown list method works on both SharePoint 2007 and SharePoint 2010,SharePoint 2013



No comments:

Post a Comment