Skip to main content

Cascading Drop-down in SharePoint 2013

Cascading drop-down to NewForm.aspx  using OOTB .

You can also use the example to create 3 level cascading drop-down and as instructed download 2 jquery files and store them in SharePoint library. Then follow the steps.

Two jquery files to be downloaded are jquery-1.3.2.min.js by jquery.com and jquery.SPServices-0.6.2.zip in codeplex by Mark D. Anderson..

1.       Create List 1: PrimaryDomain

2.       Create List2 : SecondaryDomain and create a column name it continent (could be lookup to Primary domain list or single line of text)
  3.       Create List 3: SubDomain and Create a column name it Secondarydomian (could be lookup to county list or single line of test)
Create 3 columns in list 4.
1.       PrimaryDomain : Lookup to title of PrimaryDomain List
2.       SecondaryDomain: lookup to title of SecondaryDomain List
3.       SubDomain: Lookup to title of SubDomain List

Add the following code as in new.aspx and edit.aspx of list 4 using SharePoint Designer as instructed


script language="javascript" type="text/javascript" src="/sites/EA/Style Library/Scripts/Jquery/jquery-1.10.2.min.js"  /script
script language="javascript" type="text/javascript" src="/sites/EA/Style Library/Scripts/jquery.SPServices-0.7.0.min.js" /script

script language="javascript" type="text/javascript">
 $(document).ready(function() {
 $().SPServices.SPCascadeDropdowns({
 relationshipList: "Cities",
 relationshipListParentColumn: "Country",
 relationshipListChildColumn: "Title",
 relationshipListSortColumn: "Title",
 parentColumn: "Country",
 childColumn: "City",
 debug: true
 });
$().SPServices.SPCascadeDropdowns({
 relationshipList: "Hotels",
 relationshipListParentColumn: "City",
 relationshipListChildColumn: "Title",
 parentColumn: "City",
 childColumn: "Hotel",
 debug: true
 });
});
/script

Comments