Question

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

但这里发生的问题很少：

选中的选项未显示在框中。相反，Select From The List仍然存在，如果您点击选择一个选项，它就会为空，Nothing Selected会显示在选择框上
如果您点击另一个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);

在加载数据之前，您正在刷新selectpicker。在function(data){..}块内移动可确保您的数据已加载。

选择Bootstrap选择3的问题

1 个答案: