Cascading Drop-Down List in SharePoint 2010 List Using jQuery

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:
   
   
    
2. Create a State Custom list: with a Country lookup column:
   
   
   
   Look up Column Settings:
   
   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.
   
   
    
5. Add a Content Editor Web part and select Edit HTML Source under the Format Text Tab.
   
   
    
6. Copy and Paste the following code in the HTML Editor: 

   <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">
   
     $(document).ready(function() {
   
               $().SPServices.SPCascadeDropdowns({
   
                   relationshipList: "State",
   
                   relationshipListParentColumn: "Country",
   
                   relationshipListChildColumn: "Title",
   
                   relationshipListSortColumn: "ID",
   
                   parentColumn: "Country",
   
                   childColumn: "State",
   
                   promptText: "Choose State...",
   
                   debug: true
   
               });
   
   });
   </script>

           

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.