Search code examples
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));