2

ここのページで、Ajax、PHP、および jQuery を使用して MYSQL データベースから Bootstrap 3 + Bootstrap-Select にいくつかのオプションをロードしようとしています。

しかし、ここでいくつかの問題が発生しています。

  1. 選択したオプションがボックスに表示されません。代わりにSelect From The Listまだそこにあり、オプションをクリックして選択すると、それは空になりNothing Selected、選択ボックスに表示されます

  2. 別の btns をクリックしてデータの srt をロードすると、最初のクリックは何もしませんが、2 回目のクリックでリストが更新されます。

これを修正して、最初のクリックでドロップダウンの状態を強制的に変更するにはどうすればよいですか?

データをロードするために使用したコードは次のとおりです。

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

データがロードされる前に selectpicker を更新しています。ブロック内に移動function(data){..}すると、データが確実にロードされます。

于 2014-05-09T16:50:31.950 に答える