Filter Lookup Multi-Select on previous selection

Question

I have a Lookup Column called Region, and a second lookup column of type multi-select called Customer.

I want to filter Customers column based on Regions selection. I found SPServices allows to cascade dropdown but since it is a multi-select how can I do that?

Answer 1

You can check the code below for your reference:

// (Newform.aspx, EditForm.aspx, or any other customized form.)
$.fn.SPServices.SPCascadeMultiSelect = function(options) {

    var opt = $.extend({}, {
    relationshipWebURL: "", // [Optional] The name of the Web (site) which contains the relationships list
    relationshipList: "", // The name of the list which contains the parent/child relationships
    relationshipListParentColumn: "", // The name of the parent column in the relationship list
    relationshipListChildColumn: "", // The name of the child column in the relationship list
    parentColumn: "", // The name of the parent column in the form
    childColumn: "" // The name of the child column in the form
    }, options);

    // Find the child column's multi-select possible values container
    var childSelectCtr = $().find("select:[Title='" + opt.childColumn + " possible values']");
    // Find the parent column's multi-select possible values container
    var parentSelectCtr = $().find("select:[Title='" + opt.parentColumn + " possible values']");               
    // Find the child column's multi-select selected values container
    var childSelectedCtr = $().find("select:[Title='" + opt.childColumn + " selected values']");
    // Find the parent column's multi-select selected values container
    var parentSelectedCtr = $().find("select:[Title='" + opt.parentColumn + " selected values']");
    // Find the parent column's multi-select add button
    var parentAddButton = parentSelectedCtr.parent().parent().parent().find("button:[id$=AddButton]");
    // Find the parent column's multi-select remove button
    var parentRemoveButton = parentSelectedCtr.parent().parent().parent().find("button:[id$=RemoveButton]");
    // Find the child column's multi-select remove button
    var childRemoveButton = childSelectedCtr.parent().parent().parent().find("button:[id$=RemoveButton]");

    var queryHead = null;
    var queryTail = null;
    var query = null;
    var buttonType = null;//1 for add button, 2 for remove button               

    parentAddButton.bind("click", function(){           
        //alert(parentSelectedCtr.find("option").size());
        if(parentSelectedCtr.find("option").size()>1){
            queryHead = "";
            queryTail = ""
        }
        else{
            queryHead = "";
            queryTail = "";
        }           
        query = queryHead;          
        parentSelectedCtr.find("option").each(function(){
            //alert($(this).text());
            var parentSelectedValue = $(this).text();
            query = query + "" + parentSelectedValue + "";
        });             
        query = query + queryTail;
        //alert(query);
        buttonType = 1;
        handleMultiSelect(childSelectCtr, childSelectedCtr, query, buttonType, opt);            
    });

    parentRemoveButton.bind("click", function(){            
        //alert(parentSelectCtr.find("option").size());             
        if(parentSelectCtr.find("option").size()>1){
            queryHead = "";
            queryTail = ""
        }
        else{
            queryHead = "";
            queryTail = "";
        }           
        query = queryHead;          
        parentSelectCtr.find("option").each(function(){
            //alert($(this).text());
            var parentSelectedValue = $(this).text();
            query = query + "" + parentSelectedValue + "";
        });             
        query = query + queryTail;
        //alert(query);         
        buttonType = 2;
        handleMultiSelect(childSelectCtr, childSelectedCtr, query, buttonType, opt);            
    });     

    childRemoveButton.bind("click", function(){         
        //alert(parentSelectCtr.find("option").size());             
        if(parentSelectCtr.find("option").size()>1){
            queryHead = "";
            queryTail = ""
        }
        else{
            queryHead = "";
            queryTail = "";
        }           
        query = queryHead;          
        parentSelectCtr.find("option").each(function(){
            //alert($(this).text());
            var parentSelectedValue = $(this).text();
            query = query + "" + parentSelectedValue + "";
        });             
        query = query + queryTail;
        //alert(query);
        buttonType = 2;
        handleMultiSelect(childSelectCtr, childSelectedCtr, query, buttonType, opt);        
    });  

    if(parentSelectedCtr.find("option").html() == null){
        if (childSelectCtr.find("option").html() != null) {
            childSelectCtr.find("option").each(function() {
                $(this).remove();
                childSelectCtr.trigger("change");
            });
        }
    }
    else{
        childRemoveButton.trigger("click");
    }
}

function handleMultiSelect(childSelectCtr, childSelectedCtr, query, buttonType, opt){     

    $().SPServices({
        operation: "GetListItems",
        // Force sync so that we have the right values for the child column onchange trigger
        async: false,
        webURL: opt.relationshipWebURL,
        listName: opt.relationshipList,
        // Filter based on the currently selected parent column's value
        CAMLQuery: query,
        // Only get the parent and child columns
        CAMLViewFields: "",
        // Override the default view rowlimit and get all appropriate rows
        // Took out  node because it was causing the CAML query to return duplicate rows
        CAMLRowLimit: "",
        completefunc: function(xData, Status){
            $(xData.responseXML).find("z\\:row").each(function(){
                if(buttonType == 1){
                    //Build the option
                    var optionToAdd = "" + $(this).attr("ows_" + opt.relationshipListChildColumn) + "";
                    //Add the option to the select list
                    if ((childSelectedCtr.find("option[value='" + $(this).attr("ows_ID") + "']").val() == undefined) && (childSelectCtr.find("option[value='" + $(this).attr("ows_ID") + "']").val() == undefined)) {
                        childSelectCtr.append(optionToAdd);
                    }
                }
                if(buttonType == 2){                        
                    if(childSelectedCtr.find("option[value='" + $(this).attr("ows_ID") + "']").val() != undefined) {
                        childSelectedCtr.find("option[value='" + $(this).attr("ows_ID") + "']").remove();
                    }
                    if(childSelectCtr.find("option[value='" + $(this).attr("ows_ID") + "']").val() != undefined){
                        childSelectCtr.find("option[value='" + $(this).attr("ows_ID") + "']").remove();
                    }
                }
            });
        }
    }); 
}

More information: similar post about Cascade dropdown for multi select lookup fields