ダイナミックselectpickerが定義されていないことを示します

Question

In this jsfiddle,私は、ブートストラップ選択ピッカーである#typeにオプションを動的に追加しています。これが実装されたら、getMenus()というID属性を使用して#typeからもう1つのajax呼び出しを作成し、2番目の選択ピッカーの値を入力します（#filters）。

最初の選択には問題はありませんが、値は未定義です。私が何をしていても、選択肢のオプションを認識させることができないようです。

ページが読み込まれると、#typeを変更すると、変更イベントが発生し、すべての処理が実行されます。ページが最初に読み込まれるときに初めてgetType()の実行に影響するようです。あなたが提供できるどんな助けも大歓迎です。

EDIT：それは少なくとも一つの問題は、このラインに関連しているように見える ：

$('#type').selectpicker('destroy').empty();

が、私は選択が少なくとも表示されます、destroyメソッドを削除した場合、それは人口ではありません任意のオプションで。

私は、init関数にこれを追加し、今では正常に動作しています：

$(document).on('loaded.bs.select', '#type', function(){ 
    getMenus(); 
    console.log('getMenus completed'); 
}); 
$(document).on('loaded.bs.select', '#and-filter-0', function(){ 
    getOperators(); 
    console.log('getMenus completed'); 
});  

私はこれが、この作品を作るための最善の方法であるかどうかを知りたいのですが、および/またはその他がある場合、上記の解決策を使ってコーディングしている問題があります。

Answer 1

あなたは近くにいた... $（ '＃type'）。append（options）;が呼び出されてからgetMenusが完了しました

したがって、選択属性は非同期性のため早期に発生していました。偽として：あなたが使用したときにAPIは、loaded.bs.select」 .ITは、あなたのJSfiddleコードが動作する場合は、..私は非同期を使用していた約束を使用することができますバック

正しいコールを与えたの提供しました一時的な解決策。 Check my Fiddle

は私がしたすべてはイベントが最善の解決策である作り付け「loaded.bs.select」を使用して...だから、結論はある

request = $.ajax({ 
     url: '/echo/json/', 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     async : false, 
     dataType: 'json', 
     data: { 
     json: JSON.stringify(json) 

だった...使用の方法があります。ここで約束しますが、コードが長くなるので、正しい軌道に乗ります。