Cascading Drop-Down List in SharePoint 2010 List Using jQuery

In this article we will learn how to implement Cascading Drop-Down List in SharePoint 2010 List using jQuery and Sp services.

Introduction

In this article we will learn how to implement Cascading Drop-Down List in SharePoint 2010 List using jQuery and Sp services.

For Implementing Cascading Drop-Down List in SharePoint 2010 List using jQuery and Sp services follow below steps:-

Object

  • Create Country custom list

onject

  • Create State Custom list: with Country lookup column

Create State Custom list

Look up Column Setting

State List

state list

  • Create CascadeDropDownList with Country, State lookup columns
  • Select Default New Form under List tab of newly created List CascadeDropDownList

/CascadeDropDownList

  • Add content Editor Web part and Select Edit HTML Source under Format Text Tab

Format Text Tab

  •  Copy and Paste the below Code in HTML Editor
  1.  <script language="javascript" src="/JSLibrary/jquery-1.4.2.min.js" type="text/javascript"></script><script language="javascript" src="/JSLibrary/jquery.SPServices-0.5.7.min.js" type="text/javascript"></script><script type="text/javascript">  
  2.   
  3.   $(document).ready(function() {  
  4.   
  5.             $().SPServices.SPCascadeDropdowns({  
  6.   
  7.                 relationshipList: "State",  
  8.   
  9.                 relationshipListParentColumn: "Country",  
  10.   
  11.                 relationshipListChildColumn: "Title",  
  12.   
  13.                 relationshipListSortColumn: "ID",  
  14.   
  15.                 parentColumn: "Country",  
  16.   
  17.                 childColumn: "State",  
  18.   
  19.                 promptText: "Choose State...",  
  20.   
  21.                 debug: true  
  22.   
  23.             });  
  24.   
  25.   
  26. });  
  27. </script>   

HTML Editor

Summary: - In some scenario we need to implement cascading type of concept in OOB forms as for example by selecting Countries respective states or cities. It's not easier in SharePoint.