Configuration Options not set on rebuild - Bootstrap Multiselect

Question

I am dynamically adding the select options and also setting the config options, and performing a rebuild.

The options are appended fine, but the config options set are not getting reflected. The same config options are set fine on initial load but not when appending the options dynamically.

What could be the issue?

onEvent: function(dt)
{
    $.each(dt.lst, function(ind, ele)
    {
        var htm = '<option value="' + ele + '">' + ele + '</option>';
        $('#myMultiSelectId').append(htm);
    });

    $('#myMultiSelectId').multiselect({
        maxHeight: 300,
        includeResetOption: true,
        resetText: 'Deselect All'
    });

    $('#myMultiSelectId').multiselect('rebuild');
}

Answer 1

In the Documentation there is an example that explicity uses the .multiselect('setOptions', options) in conjuntion with rebuild for this purpose, so try next code:

onEvent: function(dt)
{
    $.each(dt.lst, function(ind, ele)
    {
        var htm = '<option value="' + ele + '">' + ele + '</option>';
        $('#myMultiSelectId').append(htm);
    });

    $('#myMultiSelectId').multiselect('setOptions', {
        maxHeight: 300,
        includeResetOption: true,
        resetText: 'Deselect All'
    });

    $('#myMultiSelectId').multiselect('rebuild');
}

Alternatively, you can destroy the multiselect and create it again, like this:

onEvent: function(dt)
{
    $('#myMultiSelectId').multiselect('destroy');

    $.each(dt.lst, function(ind, ele)
    {
        var htm = '<option value="' + ele + '">' + ele + '</option>';
        $('#myMultiSelectId').append(htm);
    });

    $('#myMultiSelectId').multiselect({
        maxHeight: 300,
        includeResetOption: true,
        resetText: 'Deselect All'
    });
}