1

I am trying to use Bootstrap multiselect checkbox in my page. if the data to it is static, it is working fine without problem. but if i dynamically bind json data to it, the drop down is not working.

This is my HTML : 

<select id="categories" ></select>

And this is loading when DOM is ready :

var categCheck  = $('#categories').multiselect({
    includeSelectAllOption: true,
     enableFiltering : true
});

Here is the API call through ajax, where i am getting data from it.

$.ajax({
    type: 'GET',
    url: '/api/categoryapi',
    success: function(data) {
        $.each(data, function (index, item) {
            var opt = $('<option />', {
                value: item._id,
                text: item.title
            });
            opt.appendTo(categCheck);
            categCheck.multiselect('refresh');
        });
    }
});

When I try to pull down the drop down box, it is not working, I couldn't find out the problem. Am I doing any mistake here ? Even I have added all supporting files which is required for multi select box in the html page.

Can anyone help me out?

Sri
  • 238
  • 3
  • 16

1 Answers1

2

Instead of using 'refresh':

categCheck.multiselect('refresh');

I have tried 'rebuild':

categCheck.multiselect('rebuild');

This works fine!

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
Sri
  • 238
  • 3
  • 16