具有回調功能的Bootstrap Select

Question

我有2個Bootstrap Select下拉菜單，一個是國家列表，另一個是州列表。 國家列表是靜態的，並在頁面加載時填充。 僅通過Bootstrap Change事件填充狀態列表，並根據國家/地區加載狀態。

我需要能夠同時填充這兩個值。 所以問題是我試圖在狀態值未定義時設置狀態值，或者尚未加載其選項。 我已經嘗試在ajax調用中執行一個回調函數，但這似乎不起作用。 我認為另一個問題是，存在初始更改綁定正在破壞它。

我為遇到問題的地方寫了一個小提琴。 https://jsfiddle.net/jeffbeagley/DTcHh/37843/

向用戶顯示允許他們選擇值的空白表格，但用戶也可以從數據庫中加載保存的表格（因此，該功能被標記為“ select_data”）。

$(document).ready(function() {
        $( "#country" ).on( 'changed.bs.select', function(e) {
            change_country($( this ).val());

        });

    $( "#load" ).click(function() {
        select_data();


    });

});

每當用戶選擇一個國家時，都會調用此函數，實際的ajax調用會發送到數據庫並返回所有適當的狀態。 我嘗試將狀態傳遞給此函數並以這種方式進行選擇，但是先設置國家/地區仍會觸發國家/地區更改事件並覆蓋它。

function change_country(country_id) {
  $.ajax({
      type: 'GET',
      cache: false,
      url: '/echo/jsonp/',
      success: function(response) {
         $( "#state" ).empty();

        if(country_id == 1) {
            $( "#state" ).append( "<option value=1>Oklahoma</option" );
            $( "#state" ).append( "<option value=2>Missouri</option" );

        } else {
            $( "#state" ).append( "<option value=1>Ontario</option" );
          $( "#state" ).append( "<option value=2>Quebec</option" );

        }

       $( "#state" ).selectpicker( "refresh" );
      }

  });

}

該函數從數據庫中獲取已保存的表單並填充值。 按照其設置的方式，預期結果將是選擇國家/地區加拿大和魁北克省

function select_data() {
    var country_id = 2
  var state_id = 2

  $( "#country" ).selectpicker('val', country_id);
  $( "#state" ).selectpicker('val', state_id);

}

謝謝你的幫助！

Answer 1

可能已經解決了。有時您只需要剝離代碼並簡化代碼即可找到答案。

我替換了代碼，以在要更改的國家/地區調用事件之外填充州。 然后，我在成功的新函數中聲明了一個回調函數。 然后，我將選擇國家的邏輯移到populate_state函數中（這可能不合適）

您可以在這里查看更新的小提琴， https：//jsfiddle.net/jeffbeagley/DTcHh/37849/

所以現在函數select_data如下

function select_data() {
    var country_id = 2
  var state_id = 2

    populate_states(country_id, function()  {
    $( "#state" ).selectpicker('val', state_id);
  });


}

編輯----因此，我遇到了調用堆棧問題，因為它仍在應用原始的change事件。 因此，當調用函數select_data（）時，我將取消綁定到國家/地區選擇器的所有事件的綁定，並在回調中重新綁定。

function select_data() {
  var country_id = 2
  var state_id = 2

  $( "#country" ).off( 'changed.bs.select');
  $( "#country" ).selectpicker('val', country_id);

    populate_states(country_id, function()  {
        $( "#state" ).selectpicker('val', state_id);

        $( "#country" ).on( 'changed.bs.select', function(e) {
            change_country(e,$( this ).val());

        });

  });

}