Cascading drop-downs using Lookup fields in SharePoint using SPServices

Hi friends, in this tutorial we are going to implement cascading of lookup fields in SharePoint using SPServices:

Lets take a simple example of Country > State cascading.

We have one Country List in which we are storing our Country values in Title field.

Country List
Country List

We have another list named States, in which we are storing state values in Title field. This list also has a lookup field named Country in which we are storing corresponding countries from Country List.

States List
States List with Country as Lookup field

Now we have third list named Information in which there are two lookup fields: Country and State

Information List with Country and State as lookup fields
Information List with Country and State as lookup fields

Just add below script in Content editor webpart on NewItem and EditItem page.

<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "States",
        relationshipListParentColumn: "Country",
        relationshipListChildColumn: "Title",
        parentColumn: "Country",
        childColumn: "State",
        debug: true
    })
})
</script>

If you want three level of cascading like Country > State > City, you can modify the code as below:

<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "States",
        relationshipListParentColumn: "Country",
        relationshipListChildColumn: "Title",
        parentColumn: "Country",
        childColumn: "State",
        debug: true
    })
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "City", // This will be a name of City List
        relationshipListParentColumn: "States", // This will be a name of State list
        relationshipListChildColumn: "Title",
        parentColumn: "State",
        childColumn: "City",
        debug: true
    })
})
</script>

Watch below YouTube video created by me, which will explain the process in details:

If you liked this article, please share your comments below. Let me know if you face any issues. Like our facebook page for future updates. Have a nice day!

4 thoughts on “Cascading drop-downs using Lookup fields in SharePoint using SPServices”

  1. HI,

    i followed the video exactly but i get the following error notification:
    Error in function
    SPServices.SPCascadeDropdowns
    Parameter
    relationshiplistparentcolumn: Country or title
    Message
    Not found in relationshiplist States

  2. It works for New item and Edit Item…
    But it densest work on Quick edit.
    How can I make it work for Quick edit??

  3. How to implement if have multiple cascading dropdowns with 2 levels only? I added the same script for the other parent-child fields but one one set works.

Leave a Reply

Your email address will not be published. Required fields are marked *