Introduction

This article explains how to implement a Cascading Drop-Down List in a SharePoint 2010 List using jQuery and Sp services.

To implement a Cascading Drop-Down List in a SharePoint 2010 List using jQuery and Sp services use the following procedure.

Object

  1. Create a Country custom list:

    Country List
  2. Create a State Custom list: with a Country lookup column:

    State Column List

    Look up Column Settings:

    State List

    State List
  3. Create a CascadeDropDownList with Country and State lookup columns.
  4. Select the Default New Form under the List tab of the newly created List CascadeDropDownList.

    Default New Form
  5. Add a Content Editor Web part and select Edit HTML Source under the Format Text Tab.

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

Cascade Drop DownList

Summary

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