Cascading DropDownList In SharePoint

We will create four lists for demonstration of cascading drop-down.

We will create four lists for demonstrating cascading drop-down.

1. Create a Country list with the following values.
   
    
   
   
2. Create State list and create column Country as Lookup column in it.
   
   
   
   
3. Create Cities list and create column State with Lookup column in it.
   
   
4. Now create Employee list as per the following.

• Name Single Line of Text
• Department Choice Field
• Country Lookup column (Lookup to Country)
• State Lookup column (Lookup to State)
• City   Lookup column (Lookup to Cities)
  
   

Edit the NewForm.aspx of Employee list and add ScriptEditor webpart and paste the below code in it.

$(document).ready(function () {
    CheckDropDownValue({
        parentFormField: "Country", //Display name on form of field from parent list
        childList: "States", //List name of child list
        childLookupField: "Title", //Internal field name in Child List used in lookup
        childFormField: "State", //Display name on form of the child field
        parentFieldInChildList: "Country", //Internal field name in Child List of the parent field
        firstOptionText: "< Select a State >"
    });
    CheckDropDownValue({
        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
        firstOptionText: "< Select a City >"
    });
});

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

    $(parent).change(function () {
        DropDownCascade(this.value, params);
    });
    var currentParent = $(parent).val();
    if (currentParent != 0 && typeof (currentParent) !== "undefined") {
        DropDownCascade(currentParent, params);
    }
}
function DropDownCascade(parentID, params) {
    var child = $("select[Title='" + params.childFormField + "'], select[Title='" +
                params.childFormField + " Required Field']," +
                "select[Title='" + params.childFormField + " possible values']");
    var currentVal = params.currentValue;
    $(child).empty();
    var options = "<option value='0'>" + params.firstOptionText + "</option>";
    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 + "&$orderby=" + params.childLookupField,
        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);
    });
}

Now open the NewForm.aspx for Employee List.

Check the City dropdown which depends upon the State value and State will depend upon Country value drop-down. 

Note you can achieve as many as a level of cascading for dropdown using above code. You just need to pass the value correctly for each cascading dropdown value like below.

CheckDropDownValue({
        parentFormField: "Country", //Display name on form of field from parent list
        childList: "States", //List name of child list
        childLookupField: "Title", //Internal field name in Child List used in lookup
        childFormField: "State", //Display name on form of the child field
        parentFieldInChildList: "Country", //Internal field name in Child List of the parent field
        firstOptionText: "< Select a State >"
    });