jquery bootstrap selectpicker基于先前列表选择的刷新列表

Question

我有三个下拉列表,一个列表在页面加载时填充,不会更改.第2和第3列表可能会根据选择而改变.此功能正常.

我已经尝试将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电话的成功部分.

Answer 2

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

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

Answer 3

从我迄今为止的经验中我所理解的 -

如果要在下拉列表中添加动态选项,则必须在添加选项之前调用以下函数

$(".selectpicker").selectpicker();

一旦你完成添加选项,然后调用下面的函数(如果你使用ajax添加选项然后把这个功能成功部分,只需回答Athina)

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

如果您遇到任何奇怪的问题,如显示下拉列表而不是数据或某些时候下拉列表没有正确显示那么肯定你一定是错误地放置了函数而没有别的.