Share via

Cascading Dropdowns using SPServices

  • Article

Create Custom List ProductGroupList with ProductGroup (Single Line of Text column.)

http://sagaragaskar.files.wordpress.com/2014/01/wordpress15.png?w=300&h=240

2.

Create Custom List ProductSubGroupList with ProductSubGroup(Single Line of Text column.) and ParentProductGroup as lookup column to ProductGroup(ProductGroupList)

http://sagaragaskar.files.wordpress.com/2014/01/wordpress14.png?w=300&h=240

check below link for how to create lookup columns:

http://www.dotnetcurry.com/showarticle.aspx?ID=574

3.

Create third custom List CustomLookup with Title,ChooseProductGroupName,ProductSubGroupNameas lookup columns to ProductGroupList,ProductSubGroupList respectively.

http://sagaragaskar.files.wordpress.com/2014/01/wordpress16.png?w=300&h=240

4.

Then insert following code in content editor web part of New form.aspx for list and EditForm,.aspx for Document library.

click following link to check how to use content editor web part:

http://social.technet.microsoft.com/wiki/contents/articles/4988.sharepoint-2010-how-to-add-html-content-into-the-content-editor-webpart.aspx

Download jQuery-1.6.2.min.js ,  jQuery.SPServices-0.6.2.min.js and upload it to style library using sharepoint designer.

<script language=”javascript” type=”text/javascript” src=”/sites/KM/Style Library/JS/jQuery-1.6.2.min.js”></script>
<script language=”javascript” type=”text/javascript” src=”/sites/KM/Style Library/JS/jQuery.SPServices-0.6.2.min.js”></script>
 <script language=”javascript” type=”text/javascript”>
 $(document).ready(function() {
  
 $().SPServices.SPCascadeDropdowns({
 relationshipList: “ProductSubGroupList”,
 relationshipListParentColumn: “ParentProductGroup”,
 relationshipListChildColumn: “ProductSubGroup”,
 parentColumn: “ChooseProductGroupName”,
 childColumn: “ProductSubGroupName”,
 debug: true
 });
 
});
 
</script>

where

relationshipList :
list where lookup column and parent column are present ie.second list ProductSubGroupList

relationshipListParentColumn

internal name of parent column in above list ie.ParentProductGroup

relationshipListChildColumn

internal name of cjildcolumn in above list ie.ProductSubGroup

parentColumn

display name of parent column in custom list third list CustomLookup( ChooseProductGroupName)

childColumn

display name of child column  in custom list third list CustomLookup(ProductSubGroupName)

  • Note:

This wont work if column names have space or – in field names.