jquery bootstrap selectpicker 根据先前的列表选择刷新列表

Question

我有三个下拉列表，一个列表在页面加载时填充并且不会改变。第二和第三列表可能会根据选择而变化。此功能运行良好。

我尝试将 Bootstrap selectpicker 添加到选择器中，我可以看到它正在工作 - 不幸的是，列表不会根据选择进行刷新。我实际上认为它们是“幕后”，因为我可以看到正在传递的查询但是通过前端没有任何反应。

部分 HTML：

 <!-- SelectPicker -->
<link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

前两个 DDL 是通过 php 创建的，但是

<select id='ddl_first_lookup' onchange='ajaxFirstOnChange(this.value)' value='' class='selectpicker'></option>
<select id='ddl_second_lookup' onchange='ajaxSecondOnChange(this.value)' class='selectpicker'>
<select id="ddl_third_lookup" onchange='ajaxThirdLookup(this.value)' class='selectpicker'></select>

我有以下 Javascript：

 $(document).ready(function() {
  $(".selectpicker").selectpicker();
});

这是我发现问题的地方，我试图在 ajax on change 函数中实现这个但没有成功 - 甚至不确定它是否正确。

 $('.selectpicker').selectpicker('refresh');

我对这一切都很陌生，所以需要一些帮助。

原文由 n34_panda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在遇到同样的问题后发现了你的问题。添加 $('.selectpicker').selectpicker('refresh'); 恰好在将项目添加到我的列表之后完成了这项工作。

因此，您可能需要找到放置它的正确位置。也许在您的 ajax 调用的成功部分。

原文由 Athina 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果刷新方法没有帮助，请尝试添加一些延迟。

     setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);

原文由 Faiyaz Md Abdul 发布，翻译遵循 CC BY-SA 3.0 许可协议