'How can I link a select2 multi-select dropdown to another select2 multi-select dropdown?

In my SharePoint page, I have a single selection dropdown DP that is linked to a multi-selection dropdown Category. The values of Category are appended when DP is selected. I want to change DP to multi-selection and still have Category linked to it so that the values of Category will be added-on if more than one DP is selected. How can I do this?

<body>
<div class="form-group">
    <label>DP</label>
    <select class="form-control select2" id="sp_DP" multiple>
    </select>
</div>
                                              
<div class="form-group">
    <label>Category</label>
    <select class="form-control select2" id="spCategory" multiple>                                    
    </select>
</div>

</body>
<script>
$('[id*="sp_DP"]').on('change', function()
    {
        //$('#spCategory').empty();
        var dpName = $(this).find("option:selected").text();
        AddCategories(dpName);
    }); 

function LoadDPOptions()
{
        $.ajax({  
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('DP')/items?$select=ID,Title&$orderby=Title asc&$top=200",  
            headers: {  
                Accept: "application/json;odata=verbose"  
            },  
            async: false,  
            success: function(data) {
                    if (data.d.results.length > 0)
                    {
                        $('[id*="sp_DP"]').append($("<option></option>").attr("value", 0).text(""));

                        for (var i = 0; i < data.d.results.length; i++) 
                        {  
                            var item = data.d.results[i];  
                            $('[id*="sp_DP"]').append($("<option></option>").attr("value", item .ID).text(item.Title));
                        } 
                    }
            },
            error: function(data) {
                console.log("An error occurred. Please try again.");  
            }
        });
}

function AddCategories(dpName)
{   
    if(dpName)
    {
        $.ajax({  
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('DP')/items?$select=ID,Title,Category/ID,Category/Title&$expand=Category&$filter=Title eq " + encodeURIComponent("'" + dpName + "'"),  
            headers: {  
                Accept: "application/json;odata=verbose"
            },
            async: false,
            success: function(data) {
                    if (data.d.results.length > 0)
                    {
                        var item = data.d.results[0];
                        var catsArr = item.Category["results"];
                        catsArr.sort(function(a, b) {
                            var t1 = a.Title.toUpperCase();
                            var t2 = b.Title.toUpperCase();
                            return (t1 < t2 ) ? -1 : (t1 > t2 ) ? 1 : 0;
                        });

                        for(var i = 0; i < catsArr.length; i++)
                        {
                            var result = catsArr[i];
                            $('#spCategory').append($("<option></option>").attr("value", result.ID).text(result.Title));
                        }
                    }
            },
            error: function(data) {
                console.log("An error occurred. Please try again.");  
            }
        });
    }
}
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How can I link a select2 multi-select dropdown to another select2 multi-select dropdown?

Sources

Related Questions