CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-select
Mona Coder
Mona Coder

Reputation: 6316

Issue on Selecting Bootstrap Select 3

I am trying to load some options to Bootstrap 3 + Bootstrap-Select from MYSQL database using Ajax, PHP, and jQuery on my page here.

But there are few issues happening here:

  1. The selected options are not showing at the box. Instead the Select From The List is still there, and if you click to select an option, it is empty and Nothing Selected displays on selection box

  2. If you click on another btns to load srt of data the first click does nothing but the second click change update the list as it is supposed to be.

How can I fix this and force the dropdown to change its states with the first click?

Here is the code I used to load data:

<div class="panel panel-default">
  <div class="panel-heading">
    4 - Select Species 
    <button type="button" class="btn btn-default btn-xs pull-right" id="specicPop">?</button>
  </div>
  <div class="panel-body">
    <div class="btn-group" data-toggle="buttons" id="speciesSelect">
      <button id="allspecies" type="button" class="btn btn-default btn-sm">All Species</button>
      <button id="aquatic" type="button" class="btn btn-default btn-sm">Aquatic</button>
      <button id="terrestria" type="button" class="btn btn-default btn-sm">Terrestrial</button>
    </div>
    <select id="arearesults" class="selectpicker" data-live-search="true">
      <option value="select">Select From The List</option>
    </select>
  </div>
</div>

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

Upvotes: 2

Views: 2828

Answers (1)

glenn
glenn

Reputation: 11

Try moving the line: 

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

after:

$('#arearesults').html(data);

You are refreshing the selectpicker before the data is loaded. Moving inside the function(data){..} block ensures your data is loaded.

Upvotes: 1

Related Questions