twitter-bootstrap-3 - ダブルクリックして MySQL データベースからデータを取得する必要がある Bootstrap 3 ライブラリの選択

Question

Bootstrap 3 Group Button と Bootstrap select ライブラリを次のように使用して、MySQL データベースからデータを取得するアプリケーションがあります。

<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"  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 class="selectpicker" id="selectPicker" class="form-control" data-container="body" data-live-search="true">
    <option value="0">Select From The List</option>
 </div>
</div>

ajaxは次のとおりです。

$('.btn-group .btn').click(function(){
     $( ".selectpicker" ).selectpicker("refresh");
    $.post(
        'con/animalList.php',
        { selType : this.id },
        function(data)
        {
           $('#selectPicker').html(data);
        }
    );
});

PHP部分は次のようになります

if ($result->num_rows > 0) 
    {
    $resultStr.=  '<option value="0">Select From The List</option><option';
        while($row = $result->fetch_assoc())
        {
            $resultStr.=  '<option value="'.$row['id'].'">'.$row['fName'].'</option>';  
        }
    }
    else
    {
        $resultStr = 'Nothing found';
    }

問題は、ダブルクリックまたは2回クリックして、選択要素をデータベースからオプションでロードする必要があることです。PHP 部分は正常に動作しており、正しいデータを取得していますが、最初のクリックが機能しない理由がわかりません!

これを修正する方法を教えてください。ありがとう