Cascading Dropdown in SharePoint List

This article explains how to create a cascading Dropdown in a SharePoint List. SharePoint doesn't provide any way to do cascading drop downs in list forms out-of-the-box.

A few examples of how this could be used are, to filter countries based on contents selected, filtering City based on Country, filtering departments based on divisions, filtering parts based on the model a vehicle and many more.

Here is the step-by-step implementation of one-level and two-level cascading of a dropdown list in SharePoint.

One-Level Dropdown Cascading

Use the following procedure.

1. Two custom lists (one for the continent and another one for the country).

custom lists
Continent List

Continent List

Country List

2. Document Library where to save your code:

Document Library

3. SPSServices jQuery (you can download it from here: http://spservices.codeplex.com/releases)

Code

<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery-1.7.2.min.js"></script>

<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery.SPServices-0.7.1a.min.js"></script>

<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        $().SPServices.SPCascadeDropdowns({

            relationshipList: "Country", relationshipListParentColumn: "Continent", relationshipListChildColumn: "Title", parentColumn: "Continent", childColumn: "Country", debug: true

        });

     });</script>

4. Document Library or list that will use the preceding created custom lists (I am using World Location):

Document Library or list

Two Level Dropdown Cascading

Further, for two levels add another List (City).

 add another List

Code

<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery-1.7.2.min.js"></script>

<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery.SPServices-0.7.1a.min.js"></script>

<script language="javascript" type="text/javascript">    $(document).ready(function () {

        $().SPServices.SPCascadeDropdowns({ relationshipList: "Country", relationshipListParentColumn: "Continent", relationshipListChildColumn: "Title", parentColumn: "Continent", childColumn: "Country", debug: true });

 

        $().SPServices.SPCascadeDropdowns({

            relationshipList: "City",

            relationshipListParentColumn: "Country",

            relationshipListChildColumn: "Title",

            parentColumn: "Country",

            childColumn: "City",

            debug: true

        });

 

    });</script>

// function DropDownListSelect() { // var strMethod = "SAVE"; // var StrUrl = 'Handler.ashx?StrMethod='

+ strMethod; // $.ajax({ // type: "POST", // contentType: "application/json; charset=utf-8",

// url: StrUrl, // dataType: "json", // async: false, // success: function (response)

{ // debugger; // $.each(response, function (key, value) { // $("#DropDownList1").append($("<option>

</option>

").val(value.Id).html(value.ImageName)); // }); // } // }); // }
</
script>


The final Two Level Cascading is as below:

Two Level Cascading