How to Implement Cascaded Dropdown List in SharePoint List

Introduction


This article explains step by step procedure to implement cascaded dropdown list in SharePoint list.

Background

I was recently working on large list with many fields were in these fields are dependent on other list fields as well as fields has to be populated based on the selection of previous field value. SharePoint doesn’t support cascaded dropdown list field as out of the box. But this can be implemented in 3 ways. They are given below.

1.      JavaScript

2.      JQuery

3.      InfoPath Forms

In this article, I will explain how to implement cascaded dropdown list in SharePoint list using JQuery. I will be creating 3 custom lists in SharePoint 2010 site. Below steps explains how to implement cascaded dropdown list in SharePoint list.

1.      Create Countries Custom List – Parent List

2.      Create Cities Custom List – Child List

3.      Create Vacation Plans Custom List – Cascaded functionality implemented

4.      JQuery Information

5.      Add JQuery Script to NewForm.aspx and EditForm.aspx file using SharePoint Designer

Create Countries Custom List

This section explains creation of Countries custom list. This list acts as parent list and will store list of countries. Follow the below steps to create Countries custom list.

   v  Go to SharePoint 2010 site.

   

   v  Click on ‘List’ link in the Left Navigation bar. Click on ‘Create’ link. See the below image for more information.

       

   v  This will open list creation pop-up window. In the list creation pop-up window, select ‘List’ option in the Left Side and select Custom List as template.

   

   v  Enter list name as ‘Countries’ and select ‘Create’ button. See the below image for more information.

   v  After creating Countries custom list, add items to list. See the below image for more information.

Create Cities Custom List

This section explains creation of Cities custom list. This list acts as child list and will store list of cities. Follow the below steps to create Cities custom list.

  v  Go to SharePoint 2010 site.

  v  Create custom list as Cities. Follow the steps explained in Countries list creation section.

  v  Create 'Country' column with below information.

o    Column Name : Country

o    Type : Lookup

o    Require that this column contains information : Yes

o    Enforce Unique value : No

o    Get Information from : Select ‘Countries’ from dropdown list

o    In this column : Select ‘Title’ from dropdown list

o    Click OK to create Country column.

  v  Add items to Cities custom list. See the below image for more information.

Create Vacation Plans Custom List

This section explains creation of ‘Vacation Plans’ custom list. This list implements cascaded dropdown lists functionality i.e. based on selection of ‘Country’, cities will be populated to dropdown list. Follow the below steps to create ‘Vacation Plans’ custom list.

  v  Go to SharePoint 2010 site.

  

  v  Create custom list as ‘Vacation Plans’. Follow the steps explained in Countries list creation section.

  

  v  Create Country column with below information.

o    Column Name : Country

o    Type : Lookup

o    Require that this column contains information : Yes

o    Enforce Unique value : No

o    Get Information from : Select ‘Countries’ from dropdown list

o    In this column : Select ‘Title’ from dropdown list

o    Click OK to create Country column.

  v  Create City column with below information.

o    Column Name : City

o    Type : Lookup

o    Require that this column contains information : Yes

o    Enforce Unique value : No

o    Get Information from : Select ‘Cities’ from dropdown list

o    In this column : Select ‘Title’ from dropdown list

o    Click OK to create City column.

JQuery Information

To implement cascaded dropdown list, we need to download below jquery files from Jquery site.

  v  Jquery.SPServices-0.6.2.min.js

  v  Jquery-1.6.2.min.js

Upload these two files to any document library where everyone has access to it. I would suggest to upload these files to document library of top level site. See the below image for more information.

Add JQuery Script to NewForm.aspx and EditForm.aspx using SharePoint Designer 2010

Follow the below steps to add jquery scripts to NewForm.aspx and EditForm.aspx file using SharePoint Designer 2010.

  v  Open ‘Vacation Plans’ list in SharePoint Designer 2010.

  v  Open NewForm.aspx and EditForm.aspx in advanced mode. See the below image for more information.

  v  Add the below script in both NewForm.aspx and EditForm.aspx page.

Insert the script below <asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”> this tag.

See the below image for the script.

  v  Save the files and check-in.

Verification

1.      Go to ‘Vacation Plans’ list and click on ‘Add a new Item’ option.

2.      Select ‘India’ as Country. You could be able to see all Cities under India are populated to City dropdown list.

Comments


Provide your valuable feedback if this article is useful to you. Also don't forgot to post your queries/issues if any.