Javascript jquery bootstrap selectpicker 根据之前的列表选择刷新列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26205248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery bootstrap selectpicker refreshing lists based upon previous list choice
提问by n34_panda
I have three drop down lists, one list is populated on page load and doesn't change. The 2nd and 3rd lists may change depending on the selection. This functionality is working fine.
我有三个下拉列表，一个列表在页面加载时填充并且不会改变。第二个和第三个列表可能会根据选择而改变。此功能运行良好。
I have tried to add Bootstrap selectpicker to the selectors and I can see it is working - unfortunately the lists are not refreshing based upon the selection. I actually think "behind the scenes" they are as I can see the queries being passed but via the front end nothing happens.
我试图将 Bootstrap 选择器添加到选择器中，我可以看到它正在工作 - 不幸的是，列表没有根据选择刷新。我实际上认为“在幕后”他们是，因为我可以看到正在传递的查询，但通过前端什么也没有发生。
Part of the HTML:
部分 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>
The first two DDL's are created via php but are
前两个 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>
I have the following Javascript:
我有以下 Javascript：
$(document).ready(function() {
$(".selectpicker").selectpicker();
});
This is the point where I have discovered the problem, I am trying to implement this within the ajax on change functions without success - not even sure if it is correct.
这是我发现问题的地方，我试图在更改函数的 ajax 中实现这一点，但没有成功 - 甚至不确定它是否正确。
$('.selectpicker').selectpicker('refresh');
I am pretty new to all of this so would like some help.
我对这一切都很陌生，所以需要一些帮助。
回答by Athina
I found your question after having the same problem. Adding $('.selectpicker').selectpicker('refresh');exactly after adding items to my list did the job.
So you probably need to find the correct place to put it. Maybe in the success part of your ajax call.
我在遇到同样的问题后找到了你的问题。添加$('.selectpicker').selectpicker('refresh');项目添加到我的清单后究竟做了工作。
所以你可能需要找到正确的位置来放置它。也许在您的 ajax 调用的成功部分。
回答by Rameshwar Vyevhare
What I understood from my experience with this so far -
到目前为止，我从我的经验中了解到 -
If you are adding dynamically options to the dropdown then you must need to call below function just before adding option
如果您要向下拉列表动态添加选项，则必须在添加选项之前调用以下函数
$(".selectpicker").selectpicker();
Once you completed adding options then call below function (if you are using ajax to add option then put this function into success part as just answered Athina)
完成添加选项后，然后调用以下函数（如果您使用 ajax 添加选项，则将此函数放入成功部分，就像刚刚回答 Athina 一样）
$('.selectpicker').selectpicker('refresh');
If you are facing any weird issue like showing dropdown not data or sometime dropdown not showing properly then definitely you must have made mistake in placing about function and nothing else.
如果您遇到任何奇怪的问题，例如显示下拉列表而不是数据或有时下拉列表未正确显示，那么您肯定在放置功能方面犯了错误，而没有其他任何问题。
回答by Faiyaz Md Abdul
if refresh method doesn't help, try adding some delay.
如果刷新方法没有帮助，请尝试添加一些延迟。
setTimeout(() => {
jQuery('.selectpicker').selectpicker('refresh');
}, 500);
回答by Nadav
Changing selectpicker class name when hidden:
隐藏时更改选择器类名称：
<select name="key" class="selectpicker_oncreate">
When refreshing:
刷新时：
$('.selectpicker_oncreate').selectpicker('refresh');
回答by Rajdeep
In my Ajax successCallBack I am trying to manipulate drop down list having id as reasonCode based on dynamicId (value get from server) as below:
在我的 Ajax successCallBack 中，我试图根据 dynamicId（从服务器获取的值）操作具有 id 作为原因代码的下拉列表，如下所示：
$('#reasonCode option[value='+dynamicId+']').prop('selected', true);
but unfortunately this had not worked until I added another line after this as below:
但不幸的是，直到我在此之后添加另一行，这才起作用，如下所示：
$('#reasonCode').selectpicker('refresh');
