List of Bootstrap Multiselect Update Options in a Stream

Question

I am using bootstrap multi-select and I want to update stream parameters using ajax

To fill my multi selector in init, 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 in the event i would like to update the options list with the following ajax

I tried to use the rebuild method but did not launch the dropdown menu after creating

  $.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 see that the list is generated, but will not be displayed when selected

Answer 1

In the document, I can read:

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

You may not be able to change your widget data in your original way. You must use the setOptions method setOptions .

Else: Maybe you should consider destroying your widget .multiselect('destroy') and create it again after.

Update after comment:

In the document: (you linked)

Provides data for constructing selection options as follows:

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

So: When you receive data from your ajax call, you need to create an array of objects (these are the parameters in your choice) in a format like

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

When an array of objects is created, you just need to call the method

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

Where data is your array of objects.

I hope I understand: /

Answer 2

As an alternative to multiselect ('dataprovider', data), you can create a list with the jquery append exactly as you did in your question. The only change you need to make is to postpone recovery until 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