Home

A more up to date fork of this project is located here but work is being done to bring the original back up to date.

Common Questions

This section comes from the How do I...? section of Eric Hynds' blog.

###Set default options for all multiselect instances?

The options object is located in $.ech.multiselect.prototype.options. To configure options that all new instances will inherit, it's easier to set them in this object instead of on an instance-by-instance basis.

$.ech.multiselect.prototype.options.selectedText = "# of # selected";

Retrieve all selected values?

The easiest way is to call val() on the select box:

var values = $("select").val();

The same can be accomplished using the multiselect API. Call the getChecked method and map a new array:

var array_of_checked_values = $("select").multiselect("getChecked").map(function(){
   return this.value;    
}).get();

Retrieve values on the server?

Depends on your server-side language. In PHP et. al., you may need to name your select with square brackets on the end so the values can be captured as an array. I will probably wind up implementing this as an option at some point so it'll degrade a bit better.

Prevent the selectedList option from increasing the button's height?

Open up the CSS file and edit the .ui-multiselect declaration.

.ui-multiselect { height:25px; overflow-x:hidden; padding:2px 0 2px 4px; text-align:left }

The height you'll need to set depends on the font size and padding you use, so it may need adjusting. You may also be able to use the classes option to add a class to do the same if editing the CSS is not an option for your use case.

Manually check or uncheck a checkbox?

The checkboxes can be accessed after calling the "widget" method. Simply manually trigger the NATIVE click event on them:

// manually check (or uncheck) the third checkbox in the menu:
$("select").multiselect("widget").find(":checkbox").each(function(){
   this.click();
});

The native click event must be used (trigger('click') will not work) due to this bug in jQuery's core.

All necessary events and actions, like updating the button value, will automatically fire.

Alternatively, you could give the original option tag the selected attribute, and then call MultiSelect's refresh method.

Show checked values on another part of my page?

See this demo

Use multiselect in conjunction with the validate plugin?

Make sure you're using version 1.7 of the validation plugin; 1.6 is NOT supported with either this plugin or jQuery version 1.4.2+. Validate 1.6 defines its own "delegate" method which conflicts with the method added in jQuery. The conflict was resolved in Validate 1.7.