bootstrap multiselect not working on api json bind in Ajax call in jquery

Question

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?

Answer 1

Instead of using 'refresh':

categCheck.multiselect('refresh');

I have tried 'rebuild':

categCheck.multiselect('rebuild'); 

This works fine!