2

我正在尝试在我的页面上使用 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");
});
4

1 回答 1

1

尝试移动线路：

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

后：

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

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

于 2014-05-09T16:50:31.950 回答