Cascading Drop-Down List in SharePoint 2010 List Using jQuery

Posted: August 15, 2014 in SharePoint2010

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.   $(document).ready(function() {
    5.             $().SPServices.SPCascadeDropdowns({
    6.                 relationshipList: “State”,
    7.                 relationshipListParentColumn: “Country”,
    8.                 relationshipListChildColumn: “Title”,
    9.                 relationshipListSortColumn: “ID”,
    10.                 parentColumn: “Country”,
    11.                 childColumn: “State”,
    12.                 promptText: “Choose State…”,
    13.                 debug: true
    14.             });
    15. });
    16. </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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s