onChange event not triggered when while clicking on SelectAllOption multiselect

Question

I've using bootstrap multiselect , getting data based on selected option. This filter data will works when onChange triggered but when trying to select all onChange not working:

function getOptions(node, isFilter) {
    var isChanged = false;
    return {
        enableCaseInsensitiveFiltering: isFilter,
        includeSelectAllOption: true,
        filterPlaceholder: 'Search ...',
        nonSelectedText: node,
        numberDisplayed: 1,
        buttonWidth: '100%',
        maxHeight: 400,
        onChange: function () {
            alert('Changes');
            isChanged = true;
        },
        onDropdownHide: function (event) {
            if (isChanged) {
                filterData(node);
                isChanged = false;
            }

        }
    }
}
$('#myselect').multiselect(getOptions('myselect', true));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<!-- Build your select: -->
<select id="myselect" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

I'm sorry, it's not at all clear what you're asking, what that code is meant to do, and what you're seeing instead. Please review [*How do I ask a good question?*](/help/how-to-ask) and [*How to debug small programs*](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/). — T.J. Crowder, Jul 27 '17 at 07:34
@T.J.Crowder onChange even not triggered when using select all option — Govind Samrow, Jul 27 '17 at 07:37
Perhaps it would help you get answers if you updated your question with a **runnable** [mcve] using Stack Snippets (the `[<>]` toolbar button) demonstrating the problem. You can add external resources (Bootstrap) from a CDN like http://cdnjs.com. — T.J. Crowder, Jul 27 '17 at 08:05

Jaydip Shingala · Accepted Answer · 2017-07-27T11:55:55.560

4

Bootstrap multiselect provide a function called "onSelectAll". This function will be use for select all option. You need to use onSelectAll function with onChange function.

function getOptions(node, isFilter) {
var isChanged = false;
return {
    enableCaseInsensitiveFiltering: isFilter,
    includeSelectAllOption: true,
    filterPlaceholder: 'Search ...',
    nonSelectedText: node,
    numberDisplayed: 1,
    buttonWidth: '100%',
    maxHeight: 400,
    onChange: function () {
        isChanged = true;
    },
    onSelectAll: function() {
        isChanged = true;
    },
    onDropdownHide: function (event) {
        if (isChanged) {
            filterData(node);
            isChanged = false;
        }

    }
}
}
$('#DDLCity').multiselect(getOptions('City', true));

edited Jul 27 '17 at 11:55

answered Jul 27 '17 at 08:11

Jaydip Shingala

429
2
11
18

Then we need to add event for deselectall for too ? – Govind Samrow Jul 27 '17 at 12:57
Use following code for deselecting function of bootstrap multiselect. onSelectAll: function(e) { if(e){ isChanged = true; } else { isChanged = false; } } – Jaydip Shingala Jul 27 '17 at 13:13

score 1 · Answer 2 · answered Jul 27 '17 at 10:50

Bootstrap multiselect provides an event for this, and thats onSelectAll. You need to use onSelectAll when your Select all is checked. Here is the piece of code that is missing in your code:

onSelectAll: function() {
    alert("SELECT ALL");
    isChanged = true;
},

And below is the updated working version of your code:

function getOptions(node, isFilter) {
  var isChanged = false;
  return {
    enableCaseInsensitiveFiltering: isFilter,
    includeSelectAllOption: true,
    filterPlaceholder: 'Search ...',
    nonSelectedText: node,
    numberDisplayed: 1,
    buttonWidth: '100%',
    maxHeight: 400,
    onChange: function() {
      alert('Changes');
      isChanged = true;
    },
    onSelectAll: function() {
      alert("SELECT ALL");
      isChanged = true;
    },
    onDropdownHide: function(event) {
      if (isChanged) {
        filterData(node);
        isChanged = false;
      }

    }
  }
}
$('#myselect').multiselect(getOptions('myselect', true));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<!-- Build your select: -->
<select id="myselect" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

score 0 · Answer 3 · answered Feb 28 '23 at 07:06

To fire the event for Select All options, you can use:

$('#example-onSelectAll').multiselect({
   includeSelectAllOption: true,
   onSelectAll: function(options) {
       alert('onSelectAll triggered, ' + options.length + ' options selected!');
   }
});

and for Deselect all option, you can use:

$('#example-onDeselectAll').multiselect({
    includeSelectAllOption: true,
    onDeselectAll: function(options) {
        alert('onDeselectAll triggered, ' + options.length + ' options deselected!');
    }
});

Reference: Bootstrap Multiselect

onChange event not triggered when while clicking on SelectAllOption multiselect

3 Answers3