流程上的Bootstrap Multiselect更新选项列表

我使用bootstrap multi-select ，我想用ajax更新flow上的选项

为了填充init我的多选我做

  <option value="" >   

然后在事件我想用以下ajax更新我的选项列表

我试图使用重建方法但不会在创建后触发下拉列表

  $.ajax({ type: 'post', url: "helper/ajax_search.php", data: {models: decodeURIComponent(brands)}, dataType: 'json', success: function(data) { $('select.multiselect').empty(); $('select.multiselect').append( $('') .text('alle') .val('alle') ); $.each(data, function(index, html) { $('select.multiselect').append( $('') .text(html.name) .val(html.name) ); }); $('.multiselect').multiselect('rebuild') }, error: function(error) { console.log("Error:"); console.log(error); } }); 

使用firebug，我可以看到列表已生成，但选择将不会显示

Answer 1

在文档中，我可以阅读：

.multiselect（’setOptions’，options）用于在初始化多选后更改配置。 这可能与.multiselect（’rebuild’）结合使用。

也许您无法通过初始方式更改窗口小部件数据。 以正确的方式，您应该使用setOptions方法。

另外：按照你的方式，也许你应该考虑销毁你的小部件.multiselect('destroy')并在之后重新创建它。

评论后更新：

在文档中:(你已经链接）

通过以下方式提供用于构建选项选项的数据：

 var data = [ {label: "ACNP", value: "ACNP"}, {label: "test", value: "test"} ]; $("#multiselect").multiselect('dataprovider', data); 

所以：当你从ajax调用中获取数据时，你必须创建一个对象数组（它是你想要的选择中的选项） ，格式如下

 var data = [ {label: 'option1Label', value: 'option1Value'}, {label: 'option2Label', value: 'option2Value'}, ... ] 

创建对象数组后，只需调用该方法即可

 $("#multiselect").multiselect('dataprovider', data); 

数据是您的对象数组。

我希望我很清楚：/

Answer 2

作为multiselect（’dataprovider’，data）的替代方法，您可以使用jquery构建列表，与您在问题中的方式完全相同。 您需要做的唯一更改是延迟重建，直到ajax请求完成。

 var buildDrivers = $.getJSON('resources/orders/drivers.json', function(data) { $.each(data, function(i, driver) { $('#toolbar select[name="drivers"]').append(''+driver+''); }); }); buildDrivers.complete(function() { $('.multiselect').multiselect('rebuild'); }); 

有关文档，请参阅http://api.jquery.com/jquery.getjson/

Answer 3

我已经添加了过滤后从服务器端获取更新选项的function。 该解决方案inheritance了注入新选项的概念，破坏了选择并再次初始化它。

我考虑到了：

1. 考虑现有的选定选项，必须保留。
2. 删除重复选项（可能是已经选择的冲突和来自服务器的新冲突）。
3. 更新后保持选项托盘打开。
4. 重新分配搜索文本框中的上一个文本并将其聚焦。

只需在’refresh’函数后添加’updateOptions’作为函数以及两个辅助函数，如下所示：

 updateOptions: function (options) { var select = this.$select; options += this.getSelectedOptionsString(); var selectedIds = select.val(), btnGroup = select.next('.btn-group'), searchInput = btnGroup.find('.multiselect-search'), inputVal = searchInput.val(); options = this.removeOptionsDuplications(options); if (!options) { options = ''; } // 1) Replacing the options with new & already selected options select.html(options); // 2) Destroyng the select select.multiselect('destroy'); // 3) Reselecting the previously selected values if (selectedIds) { select.val(selectedIds); } // 4) Initialize the select again after destroying it select.multiselect(this.options); btnGroup = select.next('.btn-group'); searchInput = btnGroup.find('.multiselect-search'); // 5) Keep the tray options open btnGroup.addClass('open'); // 6) Setting the search input again & focusing it searchInput.val(inputVal); searchInput.focus(); }, getSelectedOptionsString: function () { // Helper var result = '', select = this.$select, options = select.find('option:selected'); if (options && options.length) { $.each(options, function (index, value) { if (value) { result += value.outerHTML; } }); } return result; }, removeOptionsDuplications: function (options) { // Helper var result = '', ids = new Object(); if (options && options.length) { options = $(options); $.each(options, function (index, value) { var option = $(value), optionId = option.attr('value'); if (optionId) { if (!ids[optionId]) { result += option[0].outerHTML; ids[optionId] = true; } } }); } return result; }, 

演示：

州：

“选项1”

 $('#select').multiselect('updateOptions', 'Option 2'); 

州：

“选项2”

“选项1”