javascriptjquerybootstrap-multiselect

onChange event not triggered when while clicking on SelectAllOption multiselect

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>

Solution

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