javascript - 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 中实现这个关于更改功能但没有成功 - 甚至不确定它是否正确。

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

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

Answer 1

遇到同样的问题后，我发现了你的问题。在将项目添加到我的列表后添加 $('.selectpicker').selectpicker('refresh'); 就完成了这项工作。
因此，您可能需要找到放置它的正确位置。也许在您的 ajax 调用的成功部分。