Home

Version 3

Version 3 is available for download! Please check it out as it offers a lot of great improvements and better performance. The wiki will need some updates, please bear with us as the documentation gets updated.

Common Questions

Is this on npm?

Yup! https://www.npmjs.com/package/jquery-ui-multiselect-widget

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:

var values = $("select").multiselect("value");

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 getLabels method. Simply manually trigger the NATIVE click event on them. The inputs are nested under the label tags if you need something specific from the radio/checkbox input.

// manually check (or uncheck) an item with a specific value:
$("select").multiselect("getLabels").find("input[value=xyz]").click()

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 resync 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.