Bootstrap Multiselect update option list on flow

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 :/


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