Loading Bootstrap select options through Ajax post

Question

Using Bootstrap 3 and Bootstrap-Select plugin, I am trying to load the options of the select drop down by ajax from database.

The code works perfectly when I remove the select picker class from the select element but with that class (which is required to use Bootstrap select) it is not loading any of the options.

 <select id="arearesults" class="selectpicker" data-live-search="true">
    <option value="select">Select From The List</option>
 </select>

$('.btn-group .btn').click(function(){
    $.post(
    'con/animalList.php',
    { selType : this.id },
    function(data)
                {
                  $('#arearesults').html(data);
                }
    );
});

I already test the Bootstrap select plugin and it is also working in stand alone mode (hard coded). How can I solve this issue?

Answer 1

Multiple errors in your code.

1. You haven't mentioned the response data-type in the $.post. Is the response data "JSON" or "html", etc?

2. After filling the values through AJAX in the selectbox you have to refresh it. Code:

   $('#arearesults').selectpicker("refresh");
   

Answer 2

this solution worked for me

  $('.selectpicker').selectpicker({});