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

Posted 2023-02-22

【中文标题】jquery bootstrap selectpicker根据先前的列表选择刷新列表

【英文标题】：jquery bootstrap selectpicker refreshing lists based upon previous list choice

【发布时间】：2014-11-30 01:32:53

【问题描述】：

我有三个下拉列表，一个列表在页面加载时填充并且不会更改。第 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 on change 函数中实现这一点，但没有成功 - 甚至不确定它是否正确。

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

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

【问题讨论】：

怀疑问题是由我自己调用 .selectpicker('refresh'); 引起的在错误的时刻。

【参考方案1】：

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

【讨论】：

是的，就这么简单——我只需要更好地理解这一切！谢谢。

我在修改选择字段的属性（例如，设置属性标题）时遇到了类似的问题。在此之后调用selectpicker（有或没有'refresh'）导致未选择值。当我在更改属性之前调用该函数时，它可以正常工作。

就我而言，它需要以下内容：$(document).ready(function () $('.selectpicker').selectpicker('refresh'););

同意@dat3450，这对我有用，为了刷新选择器以便出现在前端而不仅仅是代码上。除非我单击下拉列表，否则该值不会显示为选中

【参考方案2】：

到目前为止，我从我的经验中了解到的 -

如果您要向下拉列表中添加动态选项，那么您必须在添加选项之前调用下面的函数

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

一旦你完成添加选项然后调用下面的函数（如果你使用 ajax 添加选项然后把这个函数放入成功部分，就像刚刚回答的 Athina）

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

如果您遇到任何奇怪的问题，例如显示下拉菜单而不是数据或有时下拉菜单未正确显示，那么您肯定是在放置功能时犯了错误。

【讨论】：

就我个人而言，我从来不用调用第一个函数。我只需要添加选项，然后调用刷新

【参考方案3】：

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

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

【参考方案4】：

隐藏时更改选择器类名：

<select name="key" class="selectpicker_oncreate">

刷新时：

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

【参考方案5】：

在我的 Ajax successCallBack 中，我试图根据 dynamicId（从服务器获取的值）来操作 id 为 reasonCode 的下拉列表，如下所示：

$('#reasonCode option[value='+dynamicId+']').prop('selected', true);

但不幸的是，直到我在此之后添加了另一行，如下所示：

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