Bootstrap Multiselect update option list on flow

ajax, javascript, jquery, twitter-bootstrap

Solution

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

Problem

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

Original source