关于选择 Bootstrap Select 3 的问题

Question

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

但这里发生的问题很少：

1. 所选选项未显示在框中。相反，Select From The List 仍然存在，如果您单击选择一个选项，它是空的，Nothing Selected 显示在选择框上

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){..} 块内移动可确保您的数据已加载。