0

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

  • What will you use? InfoPath? JSLink? – newbie Dec 21 '18 at 12:01
  • I want to use JSLink – Mehak Dec 21 '18 at 12:17
  • Have you tried to cascade without lookup and using custom js code ? – Sohail Shaikh Dec 23 '18 at 5:25
  • how would i do that ? any hints that would be helpful in this regard? – Mehak Dec 23 '18 at 15:53
0

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>

enter image description here

  • Thank you man . You are awsome. This is what exactly I was looking for. – Mehak Dec 24 '18 at 11:21

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

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