Невозможно определить параметры на вставках мультиселектора bootstrap при использовании метода «dataprovider» для создания элементов списка.

Question

.

. Я использую расширение bootstrap-multiselect для создания выпадающих меню, которые допускают множественный выбор, имеют функцию поиска и имеют «выбрать все '. Это очень довольно легко:

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

Теперь я хочу, чтобы генерировать эти выпадающие программно (из ответа AJAX): сделать так, документация рекомендует использовать метод «DataProvider». Я не могу понять, как это сделать, сохраняя параметры enableFiltering и includeSelectAllOption.

Моя интуиция, что я должен делать что-то вроде этого:

$('#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 после факта.

Как указать фильтрацию и выбрать опции «Все» в выпадающем меню, которое я создаю программно?

Вот fiddle.

Answer 1

Нашли обходной путь. Я чувствую, что это не то, как я «должен» использовать этот инструмент, но, похоже, он работает. Мне все равно интересно узнать, почему метод 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 для потомков.

Answer 2

Вот решение,

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');