enter image description here

I'm trying to implement cascading drop down for list in SharePoint online I have 3 different list with name Countries , States, cities. and the master list Address in which I have Fields Country , State, City.

I'm trying to display Sates for selected country. and City for selected States in SharePoint Online list

4 Answers 4


You can do Cascading dropdown using SPServices library.

Try this below code:

Just add jquery-1.8.2.js and jquery.SPServices-0.7.2.min.js into style library and give proper source link in below code.

<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery.SPServices-0.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    relationshipList: "State",
    relationshipListParentColumn: "Country",    
    relationshipListChildColumn: "Title",
    parentColumn: "Country",
    childColumn: "State",
    debug: true
    relationshipList: "City",
    relationshipListParentColumn: "State", 
    relationshipListChildColumn: "Title",       
    relationshipListSortColumn: "ID",
    parentColumn: "State",
    childColumn: "City"

Get more reference from below links:

You can also achieve this using REST api. More info in this link.

Try below code:

<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>

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

            parentFormField: "State", //Display name on form of field from parent list
            childList: "Cities", //List name of child list
            childLookupField: "Title", //Internal field name in Child List used in lookup
            childFormField: "City", //Display name on form of the child field
            parentFieldInChildList: "State" //Internal field name in Child List of the parent field


    function HillbillyCascade(params)

        var parent = $("select[Title='"+params.parentFormField+"'], select[Title='"+
            params.parentFormField+" Required Field']");


        var currentParent = $(parent).val();
        if (currentParent != 0)        


    function DoHillbillyCascade(parentID,params)

        var child = $("select[Title='"+params.childFormField+"'], select[Title='"+
            params.childFormField+" Required Field']," +
           "select[Title='"+params.childFormField+" possible values']");


        var options = "";

        var call = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('"+params.childList+
                "/Id eq "+ parentID,
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"

        call.done(function (data,textStatus, jqXHR){

            for (index in data.d.results)
                options += "<option value='"+ data.d.results[index].Id +"'>"+

        call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving information from list: " + params.childList + jqXHR.responseText);



There is no such OOTB functinality.I have used SPservices SPCascadeDropdowns api.

Following is the link


Hope it helps..


3 Level Cascading drop down SharePoint step by step using jquery. https://youtu.be/yBytlB1yTtM


I used the REST api give in this page, and it works great for the new form (Thank you so much, exactly what i was looking for)

However I want to use the same functionality for the edit form as well. Tried the same script and it does not work. ( No Error message- ) Any suggestions on how to achieve this with edit form.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.