jQuery firing event when checked and unchecked on sumoselect

Question

Can anyone help with this:

http://jsfiddle.net/p89ka9jq/29/ please.

$('#boutique_drop').SumoSelect();

$("#boutique_drop").bind('SumoSelectclick', function(event, ui) {
var element = document.getElementById(ui.value + '_box');
if (element) {
    element.selected = ui.checked
    alert(element.selected);
}
})

I'm trying to get it to do the same as this:

http://jsfiddle.net/3jr2v/705/

$("#boutique_drop").multiselect();

$("#boutique_drop").bind('multiselectclick', function(event, ui) {
var element = document.getElementById(ui.value + '_box');
if (element) {
    element.selected = ui.checked
    alert(element.selected);
}
})

Thanks

Answer 1

Both the examples you have in the question works differently. The sumoselect plug-in used in the first fiddle takes the select-box, its options values and create a new <ul> with <li> elements that has data-val attribute same as the id you gave it to the select options.

The second plug-in creates a series of check box with the id almost similar to as the options. And thats how and why the alert works.

Also there is no event called "SumoSelectclick" and you where trying to bind click to the wrong element.

Working fiddle

jsfiddle.net/p89ka9jq/33

Answer 2

There is no event called "SumoSelectclick"

This might work:

$(".SumoSelect li").bind('click.check', function(event) {
    alert($(this).hasClass('selected'));
})

http://jsfiddle.net/p89ka9jq/32/

I hope it helps.

Answer 3

It can be done by -1.
You can setup with { csvDispCount: -1 } option.

The number of items to be displayed in the widget seperated by a , after that the text will be warped as 3+ Selected. Set 0 for all the options.

check documentation