0

我正在使用bootstrap-multiselect扩展来创建允许多项选择、具有搜索功能并具有“全选”选项的下拉菜单。这很容易：

$('#my-selector').multiselect({
    enableFiltering: true,
    includeSelectAllOption: true,
});

现在我想以编程方式（从 AJAX 响应）生成这些下拉列表：为此，文档建议使用“dataprovider”方法。我不知道如何在保留enableFilteringandincludeSelectAllOption选项的同时完成此操作。

我的直觉是我应该做这样的事情：

$('#example-dataprovider').multiselect({
    enableFiltering: true,
    includeSelectAllOption: true
});  

var options = [
  {label: 'Option 1', title: 'Option 1', value: '1'},
  {label: 'Option 2', title: 'Option 2', value: '2'},
  {label: 'Option 3', title: 'Option 3', value: '3'},
  {label: 'Option 4', title: 'Option 4', value: '4'},
  {label: 'Option 5', title: 'Option 5', value: '5'},
  {label: 'Option 6', title: 'Option 6', value: '6'}
];

$('#example-dataprovider').multiselect('dataprovider', options);

但这不起作用。如果我调用一个更简单的调用来构造表单，我可以让该data-provider方法工作：multiselect

$('#example-dataprovider').multiselect();

但是事后我不知道如何添加过滤和selectAll。

如何在我以编程方式构建的下拉列表中指定过滤和 selectAll 选项？

这是一个小提琴。

4

2 回答 2

1

这是解决方案，

var options = [
  {label: 'Option 1', title: 'Option 1', value: '1'},
  {label: 'Option 2', title: 'Option 2', value: '2'},
  {label: 'Option 3', title: 'Option 3', value: '3'},
  {label: 'Option 4', title: 'Option 4', value: '4'},
  {label: 'Option 5', title: 'Option 5', value: '5'},
  {label: 'Option 6', title: 'Option 6', value: '6'}
];

$('#example-dataprovider').multiselect('dataprovider', options);
var selectconfig = {
    enableFiltering: true,
    includeSelectAllOption: true
};
$('#example-dataprovider').multiselect('setOptions', selectconfig);
$('#example-dataprovider').multiselect('rebuild');
于 2015-07-05T20:35:08.163 回答
0

找到了解决方法。我觉得这不是我“应该”使用此工具的方式，但它似乎有效。我仍然有兴趣了解为什么该dataprovider方法似乎没有按我预期的方式工作。

无论如何，我目前的解决方案是使用 d3 将<option>元素替换为我想要的任何元素，然后调用多选“重建”方法来重建小部件。

$(document).ready(function() {
    $('#example-filterBehavior').multiselect({
        enableFiltering: true,
        includeSelectAllOption: true,
        selectAllValue: 'select-all-value',
        selectAllName: 'select-all-name',
        filterBehavior: 'value',
        selectedClass: 'multiselect-selected'
    });
});


var options = [{'value':1, 'title':'First'},
               {'value':2, 'title':'Second'}];

form = d3.selectAll('#example-filterBehavior');

form.selectAll('option').remove();

form.selectAll('option')
    .data(options)
    .enter().append('option')
    .attr('value', function(d){return d.value})
    .text(function(d){return d.title});

 $('#example-filterBehavior').multiselect('rebuild');

jsfiddle供后代使用。

于 2015-03-21T03:25:41.977 回答