Multilevel Cascading Dropdowns Sharepoint 365

Question

I have three dropdowns 1-Company 2-Group 3-Partner

I want to use multilevel cascading on 3rd dropdown as a combination of both (1 and 2 dropdown). How can it be done?

Almost all the examples I found on internet on multilevel cascading involves 3rd dropdown to be filtered on 2nd dropdown. But how can I filter on the combination of two? Because 2nd dropdown contains values, which can be found in values of dropdown 1 as well.

e.g

CompanyA GroupA PartnerABC

CompanyB GroupA PartnerXYZ

CompanyA GroupB PartnerQWE

I want PartnerABC to be in 3rd dropdown when companyA and GroupA is selected but I am getting PartnerABC and Partner XYZ because the list is cascaded on Groups only or Companies only

Answer 1

The following example for your reference.

1.Create custom list "Companies".

2.Create custom list "Groups", add lookup column "Company".

3.Create custom list "Partners", add lookup columns "Company" and "Group".

4.Create a custom list "TestList", add lookup columns "Company", "Group" and "Partner".

5.Add the following code into script editor web part in newform.aspx page in "TestList".

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var level1List="Companies";
var level2List="Groups";
var level3List="Partners";
var column1="Company";
var column2="Group";
var column3="Partner";
$(function(){
    initDropDowns();
    $("select[title='"+column1+"']").change(function(){
        var value=$(this).val();
        var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+level2List+"')/items?$select=Id,Title&$filter="+column1+"/Id eq "+value;
        $.ajax({
            url: url,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {       
                var items = data.d.results;
                var html="<option value='0'>(None)</option>";
                $.each(items,function(i,item){
                    html+="<option value='"+item.Id+"'>"+item.Title+"</option>";
                });
                $("select[title='"+column2+"']").html(html);
            },
            error: function (data) {        
            }
        });
    });
    $("select[title='"+column2+"']").change(function(){
        var value1=$("select[title='"+column1+"']").val();
        var value2=$(this).val();
        var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+level3List+"')/items?$select=Id,Title&$filter="+column1+"/Id eq "+value1+" and "+column2+"/Id eq "+value2;
        $.ajax({
            url: url,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {       
                var items = data.d.results;
                var html="<option value='0'>(None)</option>";
                $.each(items,function(i,item){
                    html+="<option value='"+item.Id+"'>"+item.Title+"</option>";
                });
                $("select[title='"+column3+"']").html(html);
            },
            error: function (data) {        
            }
        });
    });
});
function initDropDowns(){
    $("select[title='"+column2+"']").html("<option value='0'>(None)</option>");
    $("select[title='"+column3+"']").html("<option value='0'>(None)</option>");
}
</script>