Loading Bootstrap select options through Ajax post

Mona Coder picture Mona Coder · May 1, 2014 · Viewed 11.7k times · Source

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

Coderaemon picture Coderaemon · May 1, 2014

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");