Bootstrap Select 有回调函数

Question

我有 2 个 Bootstrap Select 下拉列表，一个是国家列表，另一个是州列表。国家/地区列表是静态的，并在页面加载时填充。州列表仅通过 Bootstrap 更改事件填充，并根据国家/地区加载州。

我需要能够同时填充这两个值。所以问题是我试图在未定义或尚未加载其选项时设置状态值。我试过在 ajax 调用中执行回调函数，但这似乎不起作用。我认为另一个问题是初始更改绑定正在搞砸它。

我已经就我遇到问题的地方写了一个 fiddle 作为基础。 https://jsfiddle.net/jeffbeagley/DTcHh/37843/

用户会看到一个空白表单，允许他们 select 值，但用户也可以从数据库加载保存的表单（因此函数标记为 "select_data" ）。

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

        });

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


    });

});

只要用户 select 是一个国家/地区，就会调用此函数，实际 ajax 调用会发送到数据库和 returns 所有相应的州。我尝试将状态传递给此函数并 select 以这种方式进行处理，但首先设置国家仍会触发国家更改事件并覆盖它。

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

  });

}

这是从数据库中获取保存的表单并填充值的函数。按照其设置的方式，预期结果将是 select 加拿大国家和魁北克州

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

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

}

感谢您的帮助！

Answer 1

可能已经弄清楚了..有时您只需要剥离代码并简化它就可以找到答案..

我替换了代码以填充从正在更改的国家/地区调用的事件之外的州。然后我在这个新函数中声明了一个成功的回调函数。然后我将 select 国家/地区的逻辑移动到 populate_state 函数中（这可能不合适）

您可以在此处查看更新后的 fiddle， 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);
  });


}

编辑---- 因此，我运行陷入调用堆栈问题，因为它仍在应用原始更改事件。因此，当函数 select_data() 被调用时，我解除绑定到国家 selector 的任何事件，并在回调中重新绑定。

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

        });

  });

}

Bootstrap Select 有回调函数

Bootstrap Select with callback function

javascript

jquery

ajax

bootstrap-select