Bootstrap-multiselect: Reset event

[Furgas]

It seems that reset button doesn't trigger any special event. Shouldn't there be onReset event handler or at least onDeselectAll triggered?

[Strofe]

Hi
Have you found a solution ?

[Furgas]

Yeah, but it ain't pretty (JSFiddle):

function changeHandler($select) {
    var $selected_options = $select.find('option:selected')

    // and so on
}

$('select').multiselect(
    {
        includeResetOption: true,
        onChange: function () {
            changeHandler(this.$select)
        }
    }
)

$('.multiselect-reset')
    .on(
        'click',
        function () {
            changeHandler(
                $(this).closest('.multiselect-native-select').find('select')
            );
        }
    );

[Strofe]

Thank you very much

$('.multiselect-reset').on('click', function () { alert('reset'); });

Have a nice day.
Christophe From France

[smhnkmr]

how to hook the event to the specific multi-select dropdown in case there are more than one?

I tried with id and class name, but it doesn't work.

[denniscastro]

for trigger event on each multi-select

add

function Multiselect(select, options) { ... this.options.onReset = $.proxy(this.options.onReset, this); ... }

````
Multiselect.prototype = {
defaults: {
...

 /**
  * Triggered on Reset.
 */
 onReset: function() {

 },

....

}
}
````

buildReset: function() { ... $('a', $resetButton).click($.proxy(function(){ this.clearSelection(); this.options.onReset(); }, this)); ... }

And in your multi-select instance:

$('#mySelect').multiselect({ .... onReset: function() { console.log('onReset clicked!'); } ... })

[saideepullal]

Hey @denniscastro thanks a lot for your solution. works perfectly with multiple dropdowns.

[HankLloydRight]

for trigger event on each multi-select
add

function Multiselect(select, options) {
  ...
  this.options.onReset = $.proxy(this.options.onReset, this);
  ...
}

```
Multiselect.prototype = {
defaults: {
...
/**
* Triggered on Reset.
*/
onReset: function() {
},
....
}
}

buildReset: function() {
...
$('a', $resetButton).click($.proxy(function(){
this.clearSelection();
this.options.onReset();
}, this));
...
}

And in your multi-select instance:

$('#mySelect').multiselect({
....
onReset: function() {
console.log('onReset clicked!');
}
...
})
```

Thanks for your solution, but I'm not sure how to implement it.. or where all these parts go. What are the "...." in the code?

Below is all the code I have for a multiple-select dropdown, which is the last part of your example. I don't know where to put the other parts. Thanks in advance.

$('#kwh,#year').multiselect({
 includeResetOption: true,
 onDropdownHide: function(option, checked, select) {
     <do stuff>
    }
 },
  onChange: function(option, checked, select) {
             <do stuff>
       }
});

[Seesi]

@HankLloydRight
You will have to modify the bootstrap-multiselect.js itself.
Then you reference that one rather on your html page.