CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmulti-selectbootstrap-multiselect
David Marx
David Marx

Reputation: 8558

Can't define options on bootstrap multiselect inputs when using 'dataprovider' method to generate list items

I'm using the bootstrap-multiselect extension to create drop down menus that allow multiple selection, have a search feature, and have a 'select all' option. This much is pretty easy:

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

Now I want to generate these dropdowns programmatically (from an AJAX response): to do so, the documentation recommends using the 'dataprovider' method. I can't figure out how to accomplish this while preserving the enableFiltering and includeSelectAllOption options.

My intuition is that I should be doing something like this:

$('#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);

But this doesn't work. I can get the data-provider method to work if I invokes a simpler multiselect call to construct the form:

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

But then I can't figure out how to add filtering and selectAll after the fact.

How do I specify filtering and selectAll options on a dropdown that I construct programmatically?

Here's a fiddle.

Upvotes: 0

Views: 4171

Answers (2)

Mrinal
Mrinal

Reputation: 464

Here is the solution,

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

Upvotes: 1

David Marx
David Marx

Reputation: 8558

Found a workaround. I feel like this isn't how I'm "supposed" to be using this tool, but it seems to work. I'd still be interested to learn why the dataprovider method doesn't appear to be working the way I expected it to.

Anyway, my current solution is to use d3 to replace the <option> elements with whatever I want, and then call the multiselect 'rebuild' method to reconstruct the widget.

$(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 for posterity.

Upvotes: 0

Related Questions