Cascading drop down in SharePoint Online for multi values

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

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

After selecting one value

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 = "";
}});

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