Sharepoint - Cascading Drop down in SharePoint Online

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() {
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "State",
    relationshipListParentColumn: "Country",    
    relationshipListChildColumn: "Title",
    parentColumn: "Country",
    childColumn: "State",
    debug: true
  });
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "City",
    relationshipListParentColumn: "State", 
    relationshipListChildColumn: "Title",       
    relationshipListSortColumn: "ID",
    parentColumn: "State",
    childColumn: "City"
  });
});
</script>

Get more reference from below links:

  • https://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPCascadeDropdowns
  • http://www.itidea.nl/index.php/cascading-dropdowns-with-jquery-and-spservices-on-a-page-or-webpart/

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() {

        HillbillyCascade({
            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']");

        $(parent).change(function(){
            DoHillbillyCascade(this.value,params);        
        });

        var currentParent = $(parent).val();
        if (currentParent != 0)        
        {
            DoHillbillyCascade(currentParent,params);
        }

    }


    function DoHillbillyCascade(parentID,params)
    {

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

        $(child).empty();

        var options = "";

        var call = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('"+params.childList+
                "')/items?$select=Id,"+params.childLookupField+","+params.parentFieldInChildList+
                "/Id&$expand="+params.parentFieldInChildList+"/Id&$filter="+params.parentFieldInChildList+
                "/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 +"'>"+
                    data.d.results[index][params.childLookupField]+"</option>";
            }
            $(child).append(options);

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

    }

</script>

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

Following is the link

https://spservices.codeplex.com/wikipage?title=%24().SPServices.SPCascadeDropdowns&referringTitle=Documentation

Hope it helps..