jquery - 选择 Bootstrap Select 3 时出现的问题

Question

我正在尝试在 my page here 上使用 Ajax、PHP 和 jQuery 从 MYSQL 数据库加载一些选项到 Bootstrap 3 + Bootstrap-Select .

但是这里发生了一些问题:

1. 所选选项未显示在框中。相反，从列表中选择仍然存在，如果您单击选择一个选项，它是空的，选择框上显示未选择任何内容

2. 如果您单击另一个 btns 来加载数据的 srt，则第一次 单击不会执行任何操作，但第二次 单击更改会按预期更新列表。

如何解决此问题并强制下拉列表在第一次单击时更改其状态？

这是我用来加载数据的代码:

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

Answer 1

尝试移动该行:

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

之后:

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

您正在加载数据之前刷新选择器。在 function(data){..} block 内移动可确保加载数据。