none
Cascade dropdown for multi select lookup fields RRS feed

  • Question

  • I have successfully implemented the SPServices JQuery open source solution in newform to implement 2 level cascading dropdown but  it doesn't seem to support multi select fields (I mean the ones where you can enable "allow multiple values").Is there any other way to achieve in SharePoint. Please suggest.

    Thanks in Advance

    Monday, April 25, 2016 10:02 AM

Answers

  • Hi,

    The following code 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();
                        }
                    }
                });
            }
        }); 
    }

    Here is a discussion about the similar requirement for your reference:

    http://spservices.codeplex.com/workitem/4196

    More information:

    http://store.bamboosolutions.com/pc-137-1-bamboo-lookup-selector.aspx

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Tuesday, April 26, 2016 2:36 AM
    Moderator

All replies

  • Hi,

    The following code 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();
                        }
                    }
                });
            }
        }); 
    }

    Here is a discussion about the similar requirement for your reference:

    http://spservices.codeplex.com/workitem/4196

    More information:

    http://store.bamboosolutions.com/pc-137-1-bamboo-lookup-selector.aspx

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Tuesday, April 26, 2016 2:36 AM
    Moderator
  • Dennis,

    I know it's been awhile since you posted this bit of script, but I think it will help me do what I need to do in SharePoint, however, I have very little idea how to implement it and your first link doesn't work anymore. Could you help?

    I have a list ("Upcoming Availabilities") that has a parent column ("Planned Mods") that is a multi lookup to a list called "Mods" where the column being looked up is called "Number". In the "Upcoming Availabilities" list the child is "Drawings to Revise" which is a lookup to a list called "PPEA Drawings" to a column called "NAVSEA Number". The "Drawings to Revise" list has a lookup column in it called "Modifiers" that is a lookup to the "Mods" list and column "Number".

    I want the "Upcoming Availabilities" list to allow "Planned Mods" column to select multiple items in the lookup and then it cascade to the "Drawings to Revise" lookup and only show the drawings that are affected by the planned mods.

    Also, does the script need anything at the top? All other scripts I've seen have something about the script language or "script src=...."

    Thank you

    Wednesday, July 17, 2019 4:06 PM