Bootstrap Selectpicker 不刷新答案

【问题标题】：Bootstrap Selectpicker not refreshingBootstrap Selectpicker 不刷新
【发布时间】：2020-02-05 01:54:02
【问题描述】：

当用户单击编辑图标时，选择器的内容会更新然后刷新。然后更新选择器的值，然后再次刷新，但由于某种原因，它没有用所选值更新。

当我在控制台中手动输入相同的代码时，一切正常。

$('#IncWidgetId').val(864)// the value used when breaking in console
$('#IncWidgetId').selectpicker('refresh')

我已确保使用新选项值更新 selectpicker，并确认 deferred 以正确的顺序触发。作为仔细检查，我还分离了.selectpicker('refresh')，以确保它不会在由于异步而选择选项之前尝试触发，但它仍然没有使用所选值更新选择器。

$(document).on('click', '[id^=EditWidgetId-]', function () {
  var id = $(this).attr('id').split('-')[1];
  var mfg = $(this).data('mfg');
  var widgetid = $(this).data('widgetid ');
  var mfgSelect = $('input[name=mfg][value="' + mfg + '"]');
  mfgSelect.prop('checked', true);

  $.when(LoadWidgets(mfg)).then(function () {
      console.log('then function');
      $('#IncWidgetId').val(widgetid );
  }).done(function () {
      console.log('done function');
      $('#IncWidgetId').selectpicker('refresh');
  });

  $('#modalWidgetNew').modal('show');
});

function LoadWidgets(mfg) {
  var r = $.Deferred();
  console.log('before ajax');

  r.resolve($.ajax({
      url: '/Widgets/FilterWidgetsDropdown',
      type: 'GET',
      cache: false,
      data: { mfg: mfg },
      success: function (partial) {
          $('#IncWidgetDDArea').html(partial);
          $('#IncWidgetId').selectpicker('refresh')
      },
      error: function (x, e) {
          if (x.status == 0) {
              alert('You are offline!!\n Please Check Your Network.');
          } else if (x.status == 404) {
              alert('Requested URL not found.');
          } else if (x.status == 500) {
              alert('Internel Server Error.');
          } else if (e == 'parsererror') {
              alert('Error.\nParsing JSON Request failed.');
          } else if (e == 'timeout') {
              alert('Request Time out.');
          } else {
              alert('Unknow Error.\n' + x.responseText);
          }
      }
  })).done(function () {
      console.log('after ajax');
      return r.promise();
  });
}

我错过了什么？

【问题讨论】：

标签： ajax promise jquery-deferred bootstrap-selectpicker

【解决方案1】：

此插件的旧版本中存在此类问题。
尝试销毁它并再次初始化。像这样的：

$('#IncWidgetId').selectpicker('destroy');
$('#IncWidgetId').selectpicker();

【讨论】：

感谢您的指导和对未来的了解。我尝试了几种不同的方式来实现它，但它并没有解决问题。
看起来您的 console.log('after ajax') 在 ajax 请求真正完成之前运行。尝试使用 setTimeout() 函数刷新 selectpicker，延迟 3-4 秒。
你错过了这一行中的 $ 符号：('#modalWidgetNew').modal('show'); 它无法搞砸 selectpicker 插件的工作，但无论如何最好修复它。
很抱歉再次打扰，但我多次使用这个插件，它总是运行良好。当我遇到问题时，我只是仔细记录了对象的每一步和状态。经过彻底的分析，我总能找到问题的根源。我相信您的问题可以通过同样的方式解决。