Bootstrap Multiselect update option list on flow

Question

I use bootstrap multi-select and I want to update options on flow with ajax

To populate on init my multiselect I do

<select name="model" class="multiselect" multiple="multiple">
                <? foreach ($sel_models as $mod) { ?>
                    <option value="<?= $mod ?>" <?= ($mod == $params['model']) ? 'selected' : '' ?>><?= $mod ?></option>
                <? } ?>    
</select>  

then on event I would like to update my option list with the following ajax

I was trying to use the rebuild method but won't fire the drop-down after creation

 $.ajax({
        type: 'post',
        url: "helper/ajax_search.php",
        data: {models: decodeURIComponent(brands)},
        dataType: 'json',
        success: function(data) {
            $('select.multiselect').empty();
            $('select.multiselect').append(
                    $('<option></option>')
                    .text('alle')
                    .val('alle')
                    );

            $.each(data, function(index, html) {
                $('select.multiselect').append(
                        $('<option></option>')
                        .text(html.name)
                        .val(html.name)
                        );
            });

            $('.multiselect').multiselect('rebuild')
        },
        error: function(error) {
            console.log("Error:");
            console.log(error);
        }
    });

With firebug I can see that the list is generated but on select won't show up

Answer 1

In the doc I can read :

.multiselect('setOptions', options) Used to change configuration after initializing the multiselect. This may be useful in combination with .multiselect('rebuild').

Maybe you can't change your widget data by your initial way. In a correct way you should use setOptions method.

Else : With your way, maybe should you think about destroy your widget .multiselect('destroy') and create it again after.

Update after comment :

In the doc : ( you've linked )

Provides data for building the select's options the following way:

var data = [
    {label: "ACNP", value: "ACNP"},
    {label: "test", value: "test"}
];
$("#multiselect").multiselect('dataprovider', data);

So : When you get data from your ajax call, you have to create an array of objects ( it's the options in the select you want to have ) with the format like

var data = 
[
    {label: 'option1Label', value: 'option1Value'},
    {label: 'option2Label', value: 'option2Value'},
    ...
]

When your objects array is created, then you just have to call the method

$("#multiselect").multiselect('dataprovider', data);

Where data is your array of objects.

I hope I'm clear :/

Answer 2

As an alternative to multiselect('dataprovider', data) you can build the list with jquery append exactly the way you did in your question. The only change you need to make is to delay the rebuild until after the ajax request is complete.

var buildDrivers = $.getJSON('resources/orders/drivers.json', function(data) { 
   $.each(data, function(i, driver) {
      $('#toolbar select[name="drivers"]').append('<option>'+driver+'</option>');
   });
});
buildDrivers.complete(function() {
    $('.multiselect').multiselect('rebuild');
});

see http://api.jquery.com/jquery.getjson/ for documentation