Bootstrap-select: Bootstrap selectpicker onchange fires multiple times

[ghost]

I am calling a function and inside cod is:

function getMISFundList(){
function getMISFundList(){
$("#MISClientListSelect").change(function(event) {
console.log("Test");
}
}

Here when I am selecting multiple options json is calling same number of times. Can you please tell single event occuring solution.

[caseyjhol]

Can you elaborate a bit? If you're selecting multiple options, the change event should be firing each time, as the value of the select is changing each time. Or is there a different issue?

[ghost]

Yes selecting multiple options, the change event should be firing each time and calling json the same number of times. Can you please tell me how to make it normal and release the event when we unselected and the same how to call json only once inside of onchange.

[caseyjhol]

Can you link me to a jsFiddle so I can see what's going on?

[boris-schwarz]

We experienced the same behaviour as well. Changing the selector from Class to ID fixed it.

Before:
$('.departments').on('changed.bs.select', onDepartmentChange);
After:
$('#departments').on('changed.bs.select', onDepartmentChange);

[caseyjhol]

I guess I'm still not sure what the issue is.

[robtoll]

I think I've worked it out. If you refer to the drop-down by class you need to also add ".bootstrap-select"

$('.myDropDown.bootstrap-select').on('changed.bs.select', myFunction);

It's becasue the bootstrap code is using the same class as you specify, so the event ends up being binded twice.

[viseshrp]

With the above solution,
the event is bound to the second element only, which has id = undefined (at least in my case).

If you want to specify that the onchange is just for the 'select' element, do this:
$('select.myDropDown').on('changed.bs.select', myFunction);

[foxmedo]

i have found the cause of the problem

the bootstrap select is using the same classes as select

the bootstrap select doesn't duplicate the element id

to solve the problem you have to use the ID or select.classe
this will prevent the execution of the class two times

$('form').on('change', 'select.xxxxxxx', function () {
// your code 
});

replace xxxxxxx by the classe name

[harshini66]

We experienced the same behaviour as well. Changing the selector from Class to ID fixed it.

Before:
$('.departments').on('changed.bs.select', onDepartmentChange);
After:
$('#departments').on('changed.bs.select', onDepartmentChange);

Thanks man... it works well