3

I have three level drop down, first is "Site", lookup with Site List, Second is "Location1", lookup with Location1 List and third is "City" which is lookup(Allow multi values) with City list.

Now from Site I want its related Location which is working properly, but from Location1 I want City, which is not working.

enter image description here

$(document).ready(function ()  
{  
   $().SPServices.SPCascadeDropdowns(  
{  
    relationshipList: "Location1",  
    relationshipListParentColumn: "Site",  
    relationshipListChildColumn: "Title",  
    parentColumn: "Site",  
    childColumn: "Location1",  
    debug: true  
});  

$().SPServices.SPCascadeDropdowns(  
{  
    relationshipList: "City",  
    relationshipListParentColumn: "Location1",  
    relationshipListChildColumn: "Title",
    parentColumn: "Location1",  
    childColumn: "City"
});  
});  

All necessary js files are already included.

Any help would be appreciated.

2

You mean you want to cascade multi-select field according to dropdown. It is also done by using select2.js. There are some ways suggested here.Hope this helps you,

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

Cascade dropdown for multi select fields

https://social.msdn.microsoft.com/Forums/office/en-US/3c9eb0ce-5218-456f-aeb8-402ba725f863/cascading-in-multi-select-lookup-column?forum=sharepointdevelopment

0

I did this requirement by using rest api and overriding the inline event handlers. Posting my answer below so that some one finds it helpful.(May not be the perfect way to obtain the result, but I didn't found any solution from anywhere)

Below is my lookup list from where I want to cascade the multi select with the drop down.
CategoryMapping is my lookup list name [1]

Below is my custom new form where I am showing the multi select values based on the drop down.
(I am using check boxes here, bcz my requirement is slightly different. User is able to select multiple values.).


Before selecting any value enter image description here

After selecting one value enter image description here

Add the below script to the custom new form.(Use content enditor or script editor. Please go through the code and change it based on your requirement).
Categories and SubCategories are my column names.CategoryMapping is my lookup list name.
I've mixed jquery and javascript statement. Sorry for that, Bcz first I was trying to implement this without using jQuery :-)

document.addEventListener("DOMContentLoaded", function(event) { 
var node = document.querySelector('[title="SubCategories possible values"]');
removeAllAvailableOptions(node);

//
//Over riding default click events -- double click on selected value
//
$("[title='SubCategories selected values']")[0].ondblclick = null;
$("[title='SubCategories selected values']").dblclick(function()
{
    var valueStringOfSelectedItems;

    //Adding selected option back to available options
    var opt = document.createElement('option');
    opt.value = this.value;
    opt.title = this.options[this.selectedIndex].innerHTML;
    opt.innerHTML = this.options[this.selectedIndex].innerHTML;
    node.appendChild(opt);

    $(this.options[this.selectedIndex]).remove();

    //forming MultoLookupPicker value string -- this is getting saved
    $("[title='SubCategories selected values'] option").each(function()
    {
        if(valueStringOfSelectedItems)
        {
            valueStringOfSelectedItems+="|t"+$(this).val()+"|t"+this.title;
        }
        else
        {
            valueStringOfSelectedItems = $(this).val()+"|t"+this.title;
        }
    });
    $("[id$='_MultiLookupPicker']").attr('value', valueStringOfSelectedItems);
    return false;       
});

//
//Over riding default click events -- click on Remove button
//
$("[id$='_RemoveButton']")[0].onclick = null;
$("[id$='_RemoveButton']").click(function()
{
    debugger;
    var valueStringOfSelectedItems;

    var selectedOptionToRemove = $("[title='SubCategories selected values'").find(":selected");

    $(selectedOptionToRemove).each(function()
    {
        //Adding selected option back to available options
        var opt = document.createElement('option');
        opt.value = $(this).val();
        opt.title = $(this).attr('title');
        opt.innerHTML = $(this).attr('title');
        node.appendChild(opt);
    });

    $("[title='SubCategories selected values'").find(":selected").remove();

    //forming MultoLookupPicker value string -- this is getting saved
    $("[title='SubCategories selected values'] option").each(function()
    {
        if(valueStringOfSelectedItems)
        {
            valueStringOfSelectedItems+="|t"+$(this).val()+"|t"+this.title;
        }
        else
        {
            valueStringOfSelectedItems = $(this).val()+"|t"+this.title;
        }
    });
    $("[id$='_MultiLookupPicker']").attr('value', valueStringOfSelectedItems);

    return false;
});

var categoryCheck = document.querySelectorAll('[type="checkbox"]');
for(var i=0; i<categoryCheck.length; i++)
{
    categoryCheck[i].addEventListener( 'change', function() {

    //If one category selected
    if(this.checked)
    {
        console.log('Checked : '+this.nextElementSibling.innerText)
        var categoryName = encodeURIComponent(this.nextElementSibling.innerText);
        //Add subcategories to multi select below

        populateAvailableOptions(categoryName);


    }
    //If category unselected
    else
    {
        console.log('UN checked : '+this.nextElementSibling.innerText);
        var categoryName = this.nextElementSibling.innerText;

        removeAllAvailableOptions(node);

        for(var i=0; i<categoryCheck.length; i++)
        {
            if(categoryCheck[i].checked)
            {
                populateAvailableOptions(encodeURIComponent(categoryCheck[i].nextElementSibling.innerText));
            }
        }
    }});
}



function populateAvailableOptions(categoryNameArg)
{
    $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('CategoryMapping')/items?$select=ID,Category,SubCategory&$filter=Category eq '"+categoryNameArg+"'",
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose",
                    "content-Type": "application/json;odata=verbose"
                },
                success: function (data) 
                {
                   console.log(data);

                    for (var i = 0; i<=data.d.results.length; i++)
                    {
                        var opt = document.createElement('option');
                        opt.value = data.d.results[i].Id;
                        opt.title = data.d.results[i].SubCategory;
                        opt.innerHTML = data.d.results[i].SubCategory;
                        node.appendChild(opt);
                    }


                },
                error: function (error)
                {
                    alert("Error: " + JSON.stringify(error));
                }});
}

function removeAllAvailableOptions(nodeArg)
{
    //
    //TO REMOVE ALL THE AVAILABLE OPTIONS
    //
    var optionsLength = nodeArg.options.length;
    for(var i=optionsLength-1; i>=0; i--)
    {
        nodeArg.remove(i);
    }
    nodeArg.length = 0;
    $("[id$='_MultiLookupPicker_data']")[0].value = "";
}});

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.