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!

Leave a Reply

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