So I've been playing around with Eric Hynds' Multiselect Widget and I've encountered a pretty interesting situation that I think deserves mention. What the widget does is it hides the select tag and replaces it with a button, and it also appends a list of links that display the options in the original select list (this is of course a simplification, but for our purposes we just need this much detail). The widget provides links for a Check All and Uncheck All of the options, but in my case the page always scrolled up when clicking the links. It was most likely a result of the widget interacting negatively with the other stuff in place - the project was using MVC 3 and a host of other plugins/scripts/etc. As a workaround, I decided to overwrite the native code for the click event, but as it turns out the list of links that the widget appends to the body doesn't provide the div with an id attribute; worse, unlike the demos Mr. Hynds has on his site the appended lists weren't anywhere near the select list. I wouldn't be able to specify the parent-child path for the jQuery code.

I initially used the .ui-multiselect-all selector, but that posed more problems since I had two of the multiselect lists in the same page, and both used the same set of classes. Investigating the code provided a possible solution: in hiding the select list the code made use of an el variable, which was provided with a title property. The title property can be set in the select list.

So in the code, I added an id attribute for the menu that had a value equal the the title of the select list:

Then, I just needed to add a title attribute to the original select list:

<select id="selectID" class="classes" multiple="multiple" title="titleForMenu">
.....................
.....................
.....................
</select>

And now I had the proper id attributes to distinguish between the two multiselect lists' Check All and Uncheck All links.


$("#titleForMenu .ui-multiselect-all").click(function() {
     $("#titleForMenu .ui-multiselect-checkboxes input:checkbox").attr('checked', 'checked');
     $("#selectID").multiselect("getButton").text($("#titleForMenu .ui-multiselect-checkboxes  
                input:checkbox").length + " selected");
     return false;
});

$("#titleForMenu .ui-multiselect-none").click(function() {
     $("#titleForMenu .ui-multiselect-checkboxes input:checkbox").removeAttr('checked');
     $("#selectID").multiselect("getButton").text("Select options");
     return false;
});