jquery Bootstrap 选择选取器根据以前的列表选择刷新列表

soat7uwm  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(6)|浏览(149)

我有三个下拉列表,一个列表在页面加载时填充,不会改变。第二个和第三个列表可能会根据选择而改变。这个功能工作正常。
我试过将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');

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

w8f9ii69

w8f9ii691#

我发现你的问题后,有同样的问题。添加$('.selectpicker').selectpicker('refresh');正是在添加项目到我的列表做的工作。
因此,您可能需要找到正确的位置来放置它,可能是在 AJAX 调用的成功部分。

dohp0rv5

dohp0rv52#

从我目前的经验来看-
如果要动态地将选项添加到下拉列表中,则必须在添加选项之前调用below函数

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

一旦你完成了添加选项,然后调用下面的函数(如果你是使用 AJAX 来添加选项,然后把这个函数到成功的一部分,就像刚才回答Athina)

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

如果你正面临着任何奇怪的问题,如显示下拉菜单,而不是数据或有时下拉菜单没有正确显示,那么肯定你一定是在放置有关功能和没有其他错误。

tpxzln5u

tpxzln5u3#

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

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

8ljdwjyq4#

在我的 AJAX successCallBack中,我尝试根据dynamicId(从服务器获取的值)操作ID为reasonCode的下拉列表,如下所示:

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

但不幸的是,这并没有工作,直到我添加了另一行后,这如下:

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

2guxujil5#

隐藏时更改selectpicker类名:

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

刷新时:

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

ajsxfq5m6#

我在refresh之前添加了destroy,这解决了我的问题。

// ... option:selected manipulation
$('.selectpicker').selectpicker('destroy');
$('.selectpicker').selectpicker('refresh');

相关问题